当前位置：首页 > JavaScript

js实现屏幕截图功能

2026-03-01 16:26:01JavaScript

使用HTML2Canvas库实现截图

HTML2Canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像，适合对DOM元素进行截图。

安装HTML2Canvas：

npm install html2canvas

基础使用示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('capture');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  // 下载图片
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imageURL;
  link.click();
});

使用Canvas API实现区域截图

原生Canvas API可以直接捕获指定区域的图像数据。

// 获取视频帧或canvas内容
function captureCanvas(canvasElement, filename = 'screenshot.png') {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvasElement.toDataURL('image/png');
  link.click();
}

// 捕获视频帧
function captureVideoFrame(videoElement, filename) {
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  canvas.getContext('2d').drawImage(videoElement, 0, 0);
  captureCanvas(canvas, filename);
}

使用WebRTC实现屏幕捕获

浏览器提供的getDisplayMedia API可以实现全屏或应用窗口捕获。

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

    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = canvas.toDataURL();
    link.click();

    videoTrack.stop();
  } catch (err) {
    console.error('Error:', err);
  }
}

使用第三方库dom-to-image

dom-to-image提供了更多导出选项，适合需要多种格式输出的场景。

安装：

npm install dom-to-image

使用示例：

import domtoimage from 'dom-to-image';

const node = document.getElementById('capture');
domtoimage.toPng(node)
  .then(dataUrl => {
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = dataUrl;
    link.click();
  })
  .catch(error => {
    console.error('Error:', error);
  });

浏览器兼容性注意事项

不同截图方法有各自的兼容性限制：

HTML2Canvas和dom-to-image不支持跨域资源
WebRTC屏幕捕获需要HTTPS环境
移动端浏览器可能对某些API有限制
部分浏览器需要用户明确授权屏幕捕获权限

性能优化建议

对于复杂DOM结构的截图：

优先使用will-change: transform提升渲染性能
考虑分块渲染大型页面
对于动态内容，可以在截图前暂停动画
Web Worker中可以处理大型图像数据

高级功能实现

实现滚动长截图：

js实现屏幕截图功能

async function captureFullPage() {
  const sections = [];
  let position = 0;
  const pageHeight = document.body.scrollHeight;

  while (position < pageHeight) {
    window.scrollTo(0, position);
    const canvas = await html2canvas(document.body);
    sections.push(canvas);
    position += window.innerHeight;
  }

  // 合并所有canvas
  const finalCanvas = document.createElement('canvas');
  finalCanvas.width = sections[0].width;
  finalCanvas.height = pageHeight;
  const ctx = finalCanvas.getContext('2d');

  let yPos = 0;
  sections.forEach(canvas => {
    ctx.drawImage(canvas, 0, yPos);
    yPos += canvas.height;
  });

  return finalCanvas.toDataURL('image/png');
}