js 实现截图
使用html2canvas库实现截图
html2canvas是一个流行的JavaScript库，可将HTML元素转换为Canvas，进而导出为图片。
安装库：
npm install html2canvas基础代码示例：
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();
});使用Canvas的toDataURL方法
若需截取Canvas自身内容，可直接使用其原生API：
const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 80%质量
console.log(dataURL); // 输出Base64编码浏览器原生API：MediaDevices.getDisplayMedia
适用于截取屏幕、窗口或标签页内容：
async function captureScreen() {
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();
// 导出图片
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'screen-capture.png';
a.click();
}, 'image/png');
}注意事项
- 跨域限制：若截图内容包含跨域图片，需确保图片服务器允许CORS。
- 性能优化：对大范围DOM截图时，html2canvas可能较慢，建议限制截图区域。
- 样式兼容性：某些CSS属性（如filter、transform）可能导致渲染差异。
扩展方案：第三方服务
若需云端截图，可考虑：
- Puppeteer：通过Headless Chrome生成截图，适用于Node.js环境。
- APIfox：提供网页截图API，直接通过HTTP请求调用。
以上方法覆盖了从前端DOM到屏幕的常见截图场景，可根据具体需求选择。
