前端实现页面截图：突破 html-to-canvas 方案
在前端中，实现页面截图是一个常见需求，但传统的 html-to-canvas 方案并不总是满足要求。本文将介绍一种更强大的方法，让你直接截取屏幕图像，就像使用 windows 截图工具一样。
使用 screen capture api
screen capture api 允许你捕获屏幕流，包括页面内容和其他屏幕元素。使用此 api，你可以创建更灵活和强大的截图工具。
立即学习“前端免费学习笔记（深入）”；
步骤：
- 首先，确保你的浏览器支持该 api。目前，firefox 不支持，而其他主流浏览器都有很好的支持。
- 使用 navigator.mediadevices.getdisplaymedia() 获取屏幕流。
- 将屏幕流分配给视频元素。
- 创建一个画布元素，并将视频流绘制到画布上。
- 从画布获取截图，并将其保存为图像文件或直接共享。
示例：
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 限制。
