当前位置：首页 > JavaScript

js 截图功能实现

2026-02-03 02:08:08JavaScript

使用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');
  // 可以保存或下载这张图片
});

使用Canvas API原生实现

对于简单的截图需求，可以直接使用Canvas的drawImage方法：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL('image/png');
};

img.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">Your HTML content</div></foreignObject></svg>');

浏览器原生API实现

现代浏览器支持MediaDevices API，可以捕获屏幕或窗口：

async function captureScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: 'window' }
    });
    const videoTrack = stream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(videoTrack);
    const bitmap = await imageCapture.grabFrame();

    const canvas = document.createElement('canvas');
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(bitmap, 0, 0);

    const image = canvas.toDataURL('image/png');
    videoTrack.stop();
  } catch (err) {
    console.error('Error:', err);
  }
}

实现截图下载功能

将Canvas转换为可下载的图片：

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

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

处理跨域资源问题

当截图包含跨域图片时，需要设置CORS属性：

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://example.com/image.jpg';

img.onload = function() {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};