请帮我写一个网页内用 js 实现当前页面截图的功能

邓伟 · 发表于 2024-4-9 12:47:12

本帖最后由邓伟于 2024-4-9 12:48 编辑

以下是一个使用JavaScript实现当前页面截图功能的示例代码：
先看效果：

现代浏览器提供了名为navigator.mediaDevices.getDisplayMedia()的API，它可以用于获取屏幕的媒体流，从而实现截图功能。下面是使用此API实现截图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屏幕截图</title>
</head>
<body>
<h1>屏幕截图</h1>
<button onclick="captureScreen()">截图</button>
<div id="screenshotContainer"></div>
<script>
async function captureScreen() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(videoTrack);
const bitmap = await imageCapture.grabFrame();
const canvas = document.createElement('canvas');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(bitmap, 0, 0);
const dataURL = canvas.toDataURL('image/png');
const img = document.createElement('img');
img.src = dataURL;
img.style.maxWidth = '100%';
const screenshotContainer = document.getElementById('screenshotContainer');
screenshotContainer.innerHTML = '';
screenshotContainer.appendChild(img);
videoTrack.stop(); // 停止屏幕共享
} catch (error) {
console.error('截图失败:', error);
}
}
</script>
</body>
</html>

复制代码

这段代码会在用户点击按钮时调用captureScreen()函数，该函数使用navigator.mediaDevices.getDisplayMedia()获取屏幕的媒体流，并通过ImageCaptureAPI抓取帧。然后，它将抓取的帧绘制到Canvas上，并将Canvas转换为DataURL以显示截图。

xuanxiao · 发表于 2024-4-9 12:50:15

666空了来测试下

邓伟 · 发表于 2024-4-9 13:15:52

此 api 接口还可以继续扩展为一键录屏功能

小白白 · 发表于 2024-6-13 23:00:26

这种技术贴，收藏了。

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] 请帮我写一个网页内用 js 实现当前页面截图的功能

在线客服

官方Q群 天天ASP家园网友互动群 群1: 697497501(新手学习互助群) 群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] 请帮我写一个网页内用 js 实现当前页面截图的功能

在线客服

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)