当前位置：首页 > JavaScript

js实现自动截图

2026-03-15 13:36:13JavaScript

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像。需要先通过npm或CDN引入该库。

// 安装html2canvas
npm install html2canvas

// 或通过CDN引入
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

调用html2canvas对指定DOM元素截图：

html2canvas(document.getElementById("target-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的drawImage方法可以实现基础截图功能，适用于简单的截图需求。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const target = document.getElementById("target-element");

canvas.width = target.offsetWidth;
canvas.height = target.offsetHeight;

ctx.drawImage(target, 0, 0);
const dataURL = canvas.toDataURL("image/png");

浏览器原生API截图

现代浏览器支持MediaDevices API，可以捕获屏幕、窗口或标签页内容。

// 请求屏幕共享权限
const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { mediaSource: "screen" }
});

const videoTrack = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(videoTrack);

imageCapture.grabFrame().then(bitmap => {
  const canvas = document.createElement("canvas");
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(bitmap, 0, 0);
  const dataURL = canvas.toDataURL("image/png");
});

使用第三方服务截图

对于需要云端截图的服务，可以考虑Puppeteer、Playwright等无头浏览器方案。

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();
})();

截图优化技巧

设置截图质量参数可以提高输出图像的质量，适用于需要高清截图的场景。

html2canvas(element, {
  scale: 2,  // 提高分辨率
  logging: false,
  useCORS: true,
  allowTaint: true
}).then(canvas => {
  canvas.toDataURL("image/jpeg", 0.95);  // JPEG质量参数
});

跨域资源处理

处理跨域资源时需要配置CORS策略，确保外部资源能被正确捕获。

const img = new Image();
img.crossOrigin = "Anonymous";
img.src = "https://example.com/image.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

定时自动截图

通过setInterval可以实现定时截图功能，适用于监控类应用。

setInterval(() => {
  html2canvas(document.body).then(canvas => {
    // 处理截图逻辑
  });
}, 5000);  // 每5秒截图一次

大页面分块截图

对于长页面，可以采用分块截图再拼接的方式处理。

const scrollAndCapture = async (page, height = 0) => {
  await page.evaluate(`window.scrollTo(0, ${height})`);
  return await page.screenshot();
};

截图后的处理

截图后可以进行二次处理，如添加水印、压缩等操作。

// 添加文字水印
ctx.font = "20px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText("Watermark", 10, 50);

移动端截图方案

针对移动端浏览器，需要考虑触摸事件和视口设置。

js实现自动截图

const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, initial-scale=1.0';
document.head.appendChild(meta);