js实现自动截图
使用HTML2Canvas库实现网页截图
HTML2Canvas是一个流行的JavaScript库，可以将网页或部分DOM元素转换为Canvas图像。安装方式：
npm install html2canvas基础用法示例：
import html2canvas from 'html2canvas';
const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = image;
link.download = 'screenshot.png';
link.click();
});使用Puppeteer实现无头浏览器截图
Puppeteer是Google开发的Node库，适合服务器端截图：
npm install 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();
})();纯Canvas API实现
原生Canvas API也可实现简单截图：
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.drawWindow(window, 0, 0, canvas.width, canvas.height, 'rgb(255,255,255)');
const imgData = canvas.toDataURL('image/png');
const newImg = document.createElement('img');
newImg.src = imgData;
document.body.appendChild(newImg);浏览器原生API（实验性）
现代浏览器支持MediaDevices API：
navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream => {
const videoTrack = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(videoTrack);
return 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);
document.body.appendChild(canvas);
});注意事项
- 跨域内容可能无法被正确渲染
- iframe内容需要特殊权限处理
- 大尺寸截图可能造成内存问题
- 某些CSS属性（如position: fixed）可能导致渲染异常
各方案选择建议：
- 前端页面截图优先考虑HTML2Canvas
- 需要完整页面渲染时使用Puppeteer
- 简单需求可用原生Canvas API
- 浏览器原生API尚处于实验阶段
