当前位置：首页 > JavaScript

js如何实现页面截图

2026-04-04 21:06:36JavaScript

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像。安装方式：

npm install html2canvas

基本使用方法：

import html2canvas from 'html2canvas';

const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas);
  // 或者转换为图片
  const image = canvas.toDataURL('image/png');
});

使用DOM-to-image库

DOM-to-image是另一个轻量级解决方案：

const node = document.getElementById('target-element');
domtoimage.toPng(node)
  .then(function(dataUrl) {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  });

使用Canvas API手动实现

对于简单需求可以直接使用Canvas API：

const element = document.getElementById('target');
const canvas = document.createElement('canvas');
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
const ctx = canvas.getContext('2d');

// 绘制DOM内容到canvas
// 注意：这种方法有限制，不能直接绘制所有DOM内容

保存截图到本地

将生成的图像保存为文件：

function downloadImage(dataUrl, filename) {
  const link = document.createElement('a');
  link.download = filename;
  link.href = dataUrl;
  link.click();
}

// 配合html2canvas使用
html2canvas(element).then(canvas => {
  downloadImage(canvas.toDataURL('image/png'), 'screenshot.png');
});

处理跨域内容

当页面包含跨域资源时，需要设置跨域属性：

html2canvas(element, {
  useCORS: true,  // 启用跨域支持
  allowTaint: true  // 允许污染画布
});

处理滚动内容

要截取完整滚动内容：

html2canvas(element, {
  scrollX: 0,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.scrollWidth,
  windowHeight: element.scrollHeight
});

性能优化建议

对于复杂页面，可以设置scale参数降低分辨率提高性能：

html2canvas(element, {
  scale: 0.5  // 输出图像质量为原图的50%
});

浏览器原生API方案

现代浏览器支持MediaDevices API，可捕获可见标签页：

js如何实现页面截图

async function captureTab() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { cursor: "always" },
    audio: false
  });
  const track = stream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(track);
  return imageCapture.grabFrame();
}