当前位置：首页 > JavaScript

js实现屏幕截图功能

2026-04-04 17:15:48JavaScript

使用HTML2Canvas库实现屏幕截图

HTML2Canvas是一个流行的JavaScript库，允许对网页或部分网页进行截图。该库通过读取DOM和样式信息，生成Canvas图像。

安装HTML2Canvas：

npm install html2canvas

基本用法示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('capture-area');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas);
  // 或转换为图片
  const image = canvas.toDataURL('image/png');
});

使用Canvas API直接截图

对于简单的需求，可以直接使用Canvas API实现截图功能。

// 截取整个窗口
function captureFullPage() {
  const canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(window, 0, 0);

  // 导出为图片
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = canvas.toDataURL();
  link.click();
}

使用WebRTC API截图视频流

对于视频或摄像头画面，可以使用WebRTC API实现截图。

// 获取视频流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    // 创建截图按钮
    document.getElementById('capture').addEventListener('click', () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      const img = document.createElement('img');
      img.src = canvas.toDataURL();
      document.body.appendChild(img);
    });
  });

使用第三方截图工具库

多个第三方库提供了更丰富的截图功能：

js实现屏幕截图功能

dom-to-image：轻量级替代HTML2Canvas
```
import domtoimage from 'dom-to-image';
```

domtoimage.toPng(document.getElementById('node')) .then(dataUrl => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); });


2. rasterizeHTML.js：特别适合包含复杂CSS的内容

### 浏览器原生API：MediaDevices.getDisplayMedia()

现代浏览器支持直接截取屏幕内容：

```javascript
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 ctx = canvas.getContext('2d');
    ctx.drawImage(bitmap, 0, 0);

    return canvas.toDataURL();
  } catch (err) {
    console.error('Error:', err);
  }
}

处理跨域内容问题

截图时可能遇到跨域资源限制，解决方案包括：

设置服务器CORS头
使用代理服务器获取资源

对于图片，设置crossOrigin属性

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://example.com/image.jpg';

性能优化建议

对于大型页面截图，可考虑以下优化：

js实现屏幕截图功能

限制截图区域大小
降低图像质量
分批渲染复杂元素
使用Web Worker处理大型截图任务

html2canvas(element, {
  scale: 0.5, // 降低分辨率
  logging: false, // 禁用日志
  useCORS: true // 启用CORS
});

保存截图的不同方式

生成截图后，可通过多种方式保存：

直接下载：

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

上传到服务器：


function uploadImage(dataUrl) {
const blob = dataURLtoBlob(dataUrl);
const formData = new FormData();
formData.append('screenshot', blob);

fetch('/upload', { method: 'POST', body: formData }); }


3. 复制到剪贴板：
```javascript
async function copyToClipboard(dataUrl) {
  const blob = await (await fetch(dataUrl)).blob();
  await navigator.clipboard.write([
    new ClipboardItem({ 'image/png': blob })
  ]);
}