当前位置：首页 > JavaScript

js抓拍实现

2026-04-06 20:33:32JavaScript

使用Canvas实现截图

在HTML中创建一个Canvas元素，通过drawImage方法将需要截图的DOM元素绘制到Canvas上。使用toDataURL方法将Canvas内容转换为图片数据。

const element = document.getElementById('element-to-capture');
const canvas = document.createElement('canvas');
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(element, 0, 0, canvas.width, canvas.height);
const imageData = canvas.toDataURL('image/png');

使用html2canvas库

html2canvas是一个流行的第三方库，能够更便捷地实现网页截图功能。安装后调用其API即可完成截图。

js抓拍实现

import html2canvas from 'html2canvas';

const element = document.getElementById('element-to-capture');
html2canvas(element).then(canvas => {
  const imageData = canvas.toDataURL('image/png');
  document.body.appendChild(canvas);
});

保存截图到本地

将生成的图片数据转换为可下载的链接，通过创建<a>标签触发下载。

js抓拍实现

const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = imageData;
link.click();

使用WebRTC实现屏幕截图

通过getDisplayMedia方法捕获屏幕内容，将视频流绘制到Canvas上实现截图。

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    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);
      const imageData = canvas.toDataURL('image/png');
      stream.getTracks().forEach(track => track.stop());
    };
  });

使用第三方API实现高级截图

某些云服务提供截图API，通过传递URL参数获取网页截图。例如使用Puppeteer或Selenium后端服务。

fetch('https://api.screenshotservice.com?url=https://example.com')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'screenshot.png';
    link.click();
  });

标签: js