js 实现截图
使用 html2canvas 库实现截图
html2canvas 是一个流行的 JavaScript 库，可以将网页元素转换为 canvas 图像。它支持大多数现代浏览器，使用简单。
安装 html2canvas：
npm install html2canvas基本用法：
import html2canvas from 'html2canvas';
const element = document.getElementById('capture');
html2canvas(element).then(canvas => {
document.body.appendChild(canvas);
// 或者转换为图片
const image = canvas.toDataURL('image/png');
});使用 Canvas API 手动截图
对于简单的截图需求，可以直接使用 Canvas API 实现。
const element = document.getElementById('target');
const canvas = document.createElement('canvas');
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(element, 0, 0);
// 导出为图片
const imgData = canvas.toDataURL('image/png');
const img = document.createElement('img');
img.src = imgData;
document.body.appendChild(img);使用第三方截图库
除了 html2canvas，还有其他一些截图库可供选择：
- dom-to-image：更轻量级的 DOM 转图片库
npm install dom-to-image
使用示例：
import domtoimage from 'dom-to-image';
const node = document.getElementById('target');
domtoimage.toPng(node)
.then(dataUrl => {
const img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
});处理跨域资源
当截图包含跨域图片时，需要设置 CORS 属性：
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://example.com/image.jpg';保存截图到本地
将生成的图片数据保存为文件：
function downloadImage(dataUrl, filename) {
const link = document.createElement('a');
link.download = filename;
link.href = dataUrl;
link.click();
}
// 使用示例
html2canvas(element).then(canvas => {
downloadImage(canvas.toDataURL(), 'screenshot.png');
});响应式截图处理
对于响应式设计，可能需要考虑不同屏幕尺寸下的截图效果：
const options = {
scale: 2, // 提高分辨率
width: element.offsetWidth,
height: element.offsetHeight,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
};
html2canvas(element, options).then(canvas => {
// 处理高分辨率截图
});处理 SVG 内容截图
截图包含 SVG 时需要特殊处理：
const options = {
allowTaint: true,
useCORS: true
};
html2canvas(element, options).then(canvas => {
// 处理包含SVG的截图
});性能优化建议
对于大型页面截图，可以采取以下优化措施：
- 限制截图区域大小
- 降低截图质量以减小文件大小
- 分批处理大型页面
- 使用 web worker 进行后台渲染
const options = {
quality: 0.8, // 降低质量
logging: false, // 禁用日志
proxy: null, // 不使用代理
useCORS: true // 启用CORS
};
