当前位置：首页 > JavaScript

js 截图功能实现

2026-03-16 02:45:32JavaScript

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，可以将HTML元素转换为Canvas，进而生成图片。这种方法适用于需要截取网页特定区域的场景。

安装html2canvas：

npm install html2canvas

基本使用示例：

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.href = image;
  link.download = 'screenshot.png';
  link.click();
});

使用Canvas API直接绘制

对于需要更精细控制的场景，可以直接使用Canvas API进行绘制和截图。

创建截图功能：

function captureToCanvas(selector) {
  const element = document.querySelector(selector);
  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;
}

使用WebRTC实现浏览器截图

WebRTC的getDisplayMedia 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;
  } catch (err) {
    console.error('Error:', err);
  }
}

使用第三方截图库

一些功能更全面的第三方库提供了更多截图选项和功能：

dom-to-image：轻量级替代方案
```
npm install dom-to-image
```
CCapture.js：适合录制动态内容
Puppeteer：无头浏览器方案，适合服务器端截图

截图后的处理与保存

生成截图后通常需要进一步处理或保存：

转换为Blob对象：

canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  // 处理URL
}, 'image/png', 0.9);

保存到本地：

function saveImage(canvas, filename = 'screenshot.png') {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

上传到服务器：

async function uploadScreenshot(canvas) {
  const blob = await new Promise(resolve => 
    canvas.toBlob(resolve, 'image/jpeg', 0.9)
  );

  const formData = new FormData();
  formData.append('image', blob, 'screenshot.jpg');

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });

  return response.json();
}