如何使用前端技术进行页面截图？
实现前端页面截图有别于通过 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: 不支持
示例代码
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);
}
}注意：
在使用 Screen Capture API 时，需要用户显式授予权限，并且不会收到用户屏幕上的任何通知。
