当前位置：首页 > JavaScript

js如何实现页面截图

2026-03-01 20:20:28JavaScript

使用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.download = 'screenshot.png';
  link.href = image;
  link.click();
});

该方法支持自定义配置，如背景透明、缩放比例等。

js如何实现页面截图

使用Canvas的drawWindow API（仅限Firefox）

Firefox浏览器提供了独有的Canvas扩展API：

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.drawWindow(window, 0, 0, canvas.width, canvas.height, 'white');
const imgData = canvas.toDataURL('image/png');

注意此API需要特权上下文，普通网页可能无法调用。

js如何实现页面截图

使用第三方服务API

对于需要后端支持的场景，可调用专业截图服务：

Puppeteer：通过Headless Chrome生成截图

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

Apiflash：基于AWS的付费API服务

浏览器原生API（实验性）

部分现代浏览器支持MediaDevices API的扩展：

navigator.mediaDevices.mediaDevices.getDisplayMedia({
  video: { mediaSource: 'screen' }
}).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);
  return canvas.toDataURL();
});

该方法需要用户授权屏幕共享权限。