js实现自动截图
使用html2canvas库实现网页截图
html2canvas是一个流行的JavaScript库，可将网页元素或整个页面转换为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 API手动实现截图
若需轻量级方案，可直接通过Canvas API捕获指定区域：
const captureElement = document.getElementById('target');
const canvas = document.createElement('canvas');
canvas.width = target.offsetWidth;
canvas.height = target.offsetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(target, 0, 0, canvas.width, canvas.height);
// 导出为图片
const img = document.createElement('a');
img.download = 'capture.png';
img.href = canvas.toDataURL('image/png');
img.click();使用第三方API（如Puppeteer）
适用于服务端自动化截图：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();浏览器原生API（实验性）
部分浏览器支持window.captureEvents()，但兼容性较差：
window.captureEvents().then(mediaStream => {
const track = mediaStream.getVideoTracks()[0];
const imageCapture = new ImageCapture(track);
imageCapture.grabFrame().then(imageBitmap => {
const canvas = document.createElement('canvas');
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imageBitmap, 0, 0);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'capture.png';
a.click();
}, 'image/png');
});
});注意事项
- 跨域内容需服务器配置CORS头。
- 动态加载资源（如字体、图片）可能需预加载。
- 大型页面可能导致内存问题，建议分区域截图。
