当前位置：首页 > JavaScript

js截图实现

2026-01-31 22:10:53JavaScript

使用html2canvas库实现网页截图

html2canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像

安装html2canvas：

npm install html2canvas

基本使用示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('capture-area');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas);
  const image = canvas.toDataURL('image/png');
});

使用Canvas API直接截图

对于简单的DOM元素，可以直接使用Canvas API进行截图

示例代码：

function captureElement(element) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = element.offsetWidth;
  canvas.height = element.offsetHeight;

  const data = `<svg xmlns="http://www.w3.org/2000/svg" width="${element.offsetWidth}" height="${element.offsetHeight}">
    <foreignObject width="100%" height="100%">
      ${new XMLSerializer().serializeToString(element)}
    </foreignObject>
  </svg>`;

  const img = new Image();
  const svgBlob = new Blob([data], {type: 'image/svg+xml'});
  const url = URL.createObjectURL(svgBlob);

  img.onload = function() {
    context.drawImage(img, 0, 0);
    URL.revokeObjectURL(url);
    const imageData = canvas.toDataURL('image/png');
    console.log(imageData);
  };

  img.src = url;
}

浏览器扩展API截图

Chrome扩展可以使用chrome.tabs.captureVisibleTab API

示例代码：

chrome.tabs.captureVisibleTab(null, {format: 'png'}, function(dataUrl) {
  console.log('截图数据URL:', dataUrl);
});

保存截图到本地

将Canvas转换为Blob并下载

示例代码：

function downloadCanvas(canvas, filename) {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

处理跨域资源问题

当截图包含跨域资源时需要特殊处理

解决方案：

html2canvas(element, {
  useCORS: true,
  allowTaint: true,
  logging: true,
  scale: 1
}).then(canvas => {
  // 处理canvas
});

响应式截图处理

针对不同DPI设备进行优化

示例代码：

const scale = window.devicePixelRatio || 1;
html2canvas(element, {
  scale: scale,
  width: element.offsetWidth * scale,
  height: element.offsetHeight * scale,
  windowWidth: element.offsetWidth * scale,
  windowHeight: element.offsetHeight * scale
}).then(canvas => {
  canvas.style.width = `${element.offsetWidth}px`;
  canvas.style.height = `${element.offsetHeight}px`;
});

截图性能优化

对于大型页面截图，可以分块处理

示例代码：

async function captureLargeElement(element, chunkHeight = 500) {
  const totalHeight = element.scrollHeight;
  const chunks = Math.ceil(totalHeight / chunkHeight);
  const canvas = document.createElement('canvas');
  canvas.width = element.offsetWidth;
  canvas.height = totalHeight;
  const ctx = canvas.getContext('2d');

  for (let i = 0; i < chunks; i++) {
    const chunkCanvas = await html2canvas(element, {
      scrollY: -i * chunkHeight,
      height: chunkHeight,
      windowHeight: chunkHeight,
      y: i * chunkHeight
    });
    ctx.drawImage(chunkCanvas, 0, i * chunkHeight);
  }

  return canvas;
}

js截图实现