前端实现页面截图：突破 html-to-canvas 方案

在前端中，实现页面截图是一个常见需求，但传统的 html-to-canvas 方案并不总是满足要求。本文将介绍一种更强大的方法，让你直接截取屏幕图像，就像使用 windows 截图工具一样。

使用 screen capture api

screen capture api 允许你捕获屏幕流，包括页面内容和其他屏幕元素。使用此 api，你可以创建更灵活和强大的截图工具。

立即学习“前端免费学习笔记（深入）”；

windows-healing-gateway

通过任务计划程序自动监控并自修复 Windows 上的 OpenClaw Gateway，具备 AI 诊断和 Telegram 报警功能。

下载

步骤：

1. 首先，确保你的浏览器支持该 api。目前，firefox 不支持，而其他主流浏览器都有很好的支持。
2. 使用 navigator.mediadevices.getdisplaymedia() 获取屏幕流。
3. 将屏幕流分配给视频元素。
4. 创建一个画布元素，并将视频流绘制到画布上。
5. 从画布获取截图，并将其保存为图像文件或直接共享。

示例：

navigator.mediaDevices.getDisplayMedia()
  .then(stream => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    ctx.drawImage(video, 0, 0);

    const imageData = canvas.toDataURL('image/png');
  })
  .catch(error => {
    console.error(error);
  });

兼容性：

screen capture api 的兼容性相当出色，但不适用于移动设备。在 pc 端，只有 firefox 不支持。

优点：

• 可以直接截取屏幕图像，包括页面内容和其他元素。
• 适用于各种页面布局和设计。
• 不会受到 html-to-canvas 限制。