当前位置：首页 > JavaScript

js实现自动截图

2026-02-02 13:28:55JavaScript

使用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');
  });
});