当前位置：首页 > JavaScript

js 实现截图功能

2026-01-30 14:43:06JavaScript

使用HTML2Canvas库实现截图

HTML2Canvas是一个流行的JavaScript库，可以将网页元素或整个页面转换为Canvas图像，进而实现截图功能。

安装HTML2Canvas库：

npm install html2canvas

基本使用示例：

js 实现截图功能

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 API也可以实现特定区域的截图功能。

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

  const ctx = canvas.getContext('2d');
  ctx.drawImage(element, 0, 0);

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

使用WebRTC实现屏幕/窗口截图

对于需要截取整个屏幕或应用窗口的情况，可以使用WebRTC API。

js 实现截图功能

async function captureScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { width: 1920, height: 1080 }
    });

    const video = document.createElement('video');
    video.srcObject = stream;
    video.onloadedmetadata = () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

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

      stream.getTracks().forEach(track => track.stop());
      return canvas.toDataURL('image/png');
    };
  } catch (err) {
    console.error('Error:', err);
  }
}

实现截图下载功能

将截图保存为图片文件下载：

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

处理跨域资源问题

当截图内容包含跨域资源时，需要设置相应的CORS策略：

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

移动端适配方案

针对移动设备的触摸事件和分辨率适配：

function captureMobile(element) {
  const scale = window.devicePixelRatio || 1;
  const canvas = document.createElement('canvas');
  canvas.width = element.offsetWidth * scale;
  canvas.height = element.offsetHeight * scale;

  const ctx = canvas.getContext('2d');
  ctx.scale(scale, scale);

  return new Promise(resolve => {
    html2canvas(element, {
      canvas: canvas,
      scale: scale,
      logging: false
    }).then(canvas => {
      resolve(canvas.toDataURL('image/png'));
    });
  });
}