js如何实现页面截图
使用html2canvas库实现截图
html2canvas是一个流行的JavaScript库，能将DOM元素转换为Canvas图像。需引入库后调用以下代码：
import html2canvas from 'html2canvas';
const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = imgData;
link.click();
});该方法支持自定义配置，如缩放比例、背景透明度等。注意跨域资源需配置useCORS: true。
使用Canvas的drawImage方法
若需截取特定Canvas内容，可直接使用Canvas API：
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.drawImage(videoOrCanvasElement, 0, 0, canvas.width, canvas.height);
// 导出为图片
const dataURL = canvas.toDataURL('image/jpeg');浏览器原生API：MediaDevices.getDisplayMedia
适用于截取浏览器标签页或屏幕内容：
async function captureTab() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(videoTrack);
const bitmap = await imageCapture.grabFrame();
const canvas = document.createElement('canvas');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(bitmap, 0, 0);
videoTrack.stop();
}注意：此方法需用户授权且仅支持HTTPS环境。
使用第三方服务（如Apify）
对于复杂页面（含滚动区域），可调用无头浏览器服务：
const apify = require('apify-client');
const client = new apify.ApifyClient({
token: 'YOUR_API_KEY',
});
client.tasks.call({
taskId: 'screenshot-task',
inputs: { url: 'https://example.com' }
}).then(({ screenshotUrl }) => {
console.log('截图URL:', screenshotUrl);
});需注册API密钥并可能产生费用。
注意事项
- 跨域资源需确保服务器允许CORS。
- 动态内容（如CSS动画）建议延迟捕获。
- 大尺寸截图可能需分块处理避免内存溢出。
- 移动端需测试兼容性，部分API可能受限。
