js实现截图功能
使用HTML2Canvas库实现截图
HTML2Canvas是一个流行的JavaScript库，可以将网页中的特定元素或整个页面转换为Canvas图像，从而实现截图功能。
安装HTML2Canvas库：
npm install html2canvas基本使用示例：
import html2canvas from 'html2canvas';
const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
document.body.appendChild(canvas);
// 或者保存为图片
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = image;
link.click();
});使用Canvas API实现区域截图
对于简单的区域截图，可以直接使用Canvas API：
function captureArea(element) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
ctx.drawImage(element, 0, 0, canvas.width, canvas.height);
return canvas;
}
// 使用示例
const imgElement = document.getElementById('image-to-capture');
const canvas = captureArea(imgElement);
document.body.appendChild(canvas);浏览器原生Screen Capture API
现代浏览器支持Screen Capture API，可以捕获屏幕、窗口或标签页内容：
async function captureScreen() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: { width: 1920, height: 1080 }
});
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);
return canvas;
} catch (err) {
console.error('Error:', err);
}
}实现全屏截图
结合HTML2Canvas和全屏捕获：
function captureFullPage() {
return html2canvas(document.body, {
scrollY: -window.scrollY,
scrollX: -window.scrollX,
windowWidth: document.documentElement.scrollWidth,
windowHeight: document.documentElement.scrollHeight
});
}注意事项
- 跨域资源可能导致Canvas污染，需要确保所有资源同源或配置CORS
- 某些CSS属性可能无法正确渲染到Canvas中
- 大页面截图可能导致性能问题，建议分块处理
- 浏览器扩展可能干扰截图过程
移动端截图实现
对于移动端设备，可以使用相同的HTML2Canvas方法，但需要注意触摸事件和视口设置：
function mobileCapture() {
const options = {
scale: 2, // 提高分辨率
useCORS: true,
allowTaint: true
};
html2canvas(document.body, options).then(canvas => {
// 处理生成的canvas
});
}以上方法提供了从简单到复杂的多种截图实现方案，可根据具体需求选择适合的方法。
