当前位置：首页 > JavaScript

js 实现截图

2026-02-28 22:52:37JavaScript

使用 html2canvas 库实现截图

html2canvas 是一个流行的 JavaScript 库，可以将网页中的 HTML 元素转换为 Canvas 图像。以下是一个基本示例：

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 直接绘制

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

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.drawImage(document.querySelector('video'), 0, 0, canvas.width, canvas.height);

const dataURL = canvas.toDataURL('image/png');
window.open(dataURL);

浏览器原生 API 实现截图

现代浏览器提供了 Screen Capture API：

js 实现截图

async function captureScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia();
    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 context = canvas.getContext('2d');
    context.drawImage(bitmap, 0, 0);

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

实现网页局部截图

针对特定区域的截图实现：

function captureArea(elementId) {
  const element = document.getElementById(elementId);
  const rect = element.getBoundingClientRect();

  html2canvas(element, {
    x: rect.left,
    y: rect.top,
    width: rect.width,
    height: rect.height,
    windowWidth: document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight
  }).then(canvas => {
    document.body.appendChild(canvas);
  });
}

处理跨域资源截图

当页面包含跨域资源时，需要配置 CORS：

js 实现截图

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

截图质量优化

提高截图质量的配置选项：

html2canvas(element, {
  scale: 2,  // 提高分辨率
  logging: false,
  backgroundColor: '#ffffff',
  removeContainer: true
}).then(canvas => {
  // 高质量图像处理
});

响应式截图处理

适应不同设备的截图方案：

function responsiveCapture() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  html2canvas(document.body, {
    width: viewportWidth,
    height: viewportHeight,
    windowWidth: viewportWidth,
    windowHeight: viewportHeight
  }).then(canvas => {
    // 响应式截图处理
  });
}

截图后处理

对截图图像进行后期处理：

html2canvas(element).then(canvas => {
  const ctx = canvas.getContext('2d');

  // 添加水印
  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('Watermark', 20, 20);

  // 转换为Blob
  canvas.toBlob(blob => {
    const file = new File([blob], 'screenshot.png', {type: 'image/png'});
    // 上传或其他处理
  }, 'image/png');
});