当前位置：首页 > JavaScript

js实现截图

2026-01-16 13:00:26JavaScript

使用HTML2Canvas库实现截图

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

npm install html2canvas

基础用法示例：

js实现截图

import html2canvas from 'html2canvas';

const element = document.getElementById('capture-area');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas);
  const imgData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imgData;
  link.click();
});

使用Canvas API原生截图

对于简单的DOM元素截图，可以直接使用Canvas的drawImage方法：

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

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  context.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 here</div>' +
  '</foreignObject></svg>'
);

浏览器原生API截图

现代浏览器支持MediaDevices API实现屏幕捕捉：

js实现截图

async function captureScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { mediaSource: 'screen' }
    });
    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);
    return canvas.toDataURL();
  } catch (err) {
    console.error('Error:', err);
  }
}

处理跨域资源

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

const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
  // 处理图片
};
img.src = 'http://example.com/image.jpg';

移动端适配方案

针对移动设备触摸事件的处理：

document.addEventListener('touchstart', handleTouch);
document.addEventListener('touchmove', handleTouch);

function handleTouch(e) {
  e.preventDefault();
  // 实现触摸截图逻辑
}