如何使用 Screen Capture API 实现前端页面截图？（如何使用.截图.页面.Capture.Screen.....）

wufei123 2025-01-26 阅读:57 评论:0

如何使用前端技术进行页面截图？实现前端页面截图有别于通过 html-to-canvas 转换 HTML 内容的方案。本文将介绍一种更加类似于 Windows 截图工具的实现方式。解决方案：Screen Capture API Scre...

如何使用 Screen Capture API 实现前端页面截图？

如何使用前端技术进行页面截图？

实现前端页面截图有别于通过 html-to-canvas 转换 HTML 内容的方案。本文将介绍一种更加类似于 Windows 截图工具的实现方式。

解决方案：Screen Capture API

Screen Capture API（屏幕捕获 API）提供了一种捕获屏幕流的方法，从而可以将页面截图（当前可见区域）。但需要注意，此 API 需要用户同意才能进行捕获。

兼容性

Screen Capture API 的兼容性相对较差，移动端设备基本无法使用。在 PC 端，Firefox 浏览器也不支持该 API。

具体兼容性如下：

Chrome: 56+
Edge: 15+
Opera: 43+
Safari: 不支持

示例代码

PHP

async function captureScreen() {
  // 申请用户权限
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true
    });
    const track = stream.getVideoTracks()[0];

    // 创建视频元素显示捕获到的视频流
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    // 等到帧加载到视频元素中
    await new Promise(resolve => video.onloadeddata = resolve);

    // 此时视频元素中已经包含屏幕图像，截图
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0);

    // 将Canvas转换为DataURL
    const dataURL = canvas.toDataURL();
  } catch (error) {
    // 处理用户拒绝或其他错误
    console.error(error);
  }
}