当前位置：首页 > JavaScript

js实现屏幕截图功能

2026-01-31 01:20:58JavaScript

使用HTML2Canvas库实现截图

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

npm install html2canvas

基本用法：

js实现屏幕截图功能

import html2canvas from 'html2canvas';

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

使用Canvas API原生截图

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

js实现屏幕截图功能

function captureElement(elementId) {
  const element = document.getElementById(elementId);
  const canvas = document.createElement('canvas');
  canvas.width = element.offsetWidth;
  canvas.height = element.offsetHeight;

  const ctx = canvas.getContext('2d');
  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();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    downloadImage(dataURL);
  };
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(data)}`;
}

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

使用WebRTC实现屏幕捕捉

需要用户授权屏幕共享权限：

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 image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = image;
    link.click();

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

浏览器扩展API截图

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

chrome.tabs.captureVisibleTab(null, { format: 'png' }, dataUrl => {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = dataUrl;
  link.click();
});