web 网页可以实现截图功能吗？类似 QQ 微信的截图功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 103 天前的主题，其中的信息可能已经有所发展或是发生改变。

类似 QQ 微信的截图功能，web 网页可以实现截图功能吗，以前好像见过，现在找不到了，是不是配合插件实现的呢，各位有什么思路吗

18 条回复 • 2024-08-19 13:53:20 +08:00

leido

103 天前 via Android

截图网页内业务可以，截图系统别想了

0o0O0o0O0o

103 天前 via iPhone

网页截图
https://github.com/niklasvh/html2canvas

系统截图
https://developer.chrome.com/docs/extensions/develop/concepts/native-messaging

DOLLOR

103 天前

navigator.mediaDevices.getDisplayMedia()
不过使用条件比较严格（ HTTPS ），而且一般水平的前端开发者玩不来。

mightybruce

103 天前

谷歌 chrome 自带截图
键点击页面并打开检查器。

在 Chrome 检查器的左上角，你会看到一个小手机图标。

点击那个图标，网页顶部将出现一个新的黑色工具栏。

在这个黑色工具栏中，你可以选择想要模拟的屏幕尺寸（对于桌面显示器来说，可能需要 1920x1080 ）

在黑色工具栏的右上角有三个点组成的菜单，在该菜单中你可以进行全屏截图

mightybruce

103 天前

插件截图比较容易，尤其是那种懒加载，需要滚动不断下拉的页面，
我用过的一个插件叫做 awesome screenshot 截图录屏

Daitabashi

103 天前

@leido 在线笔试时好像能共享整个桌面, 应该是有接口的吧, 一个对话框就共享了

yukino

103 天前

你是否再找 Firefox

kingofzihua

103 天前

https://github.com/likaia/js-screen-shot

kk2syc

103 天前

@Daitabashi 不安装扩展或者插件不可能的吧，纯 web 在浏览器内的怎么溢出到系统层？

xiangyuecn

103 天前

@DOLLOR #3 浏览器兼容性太差才是主要的，代码不复杂

直接手撸 getDisplayMedia 截屏：
```
navigator.mediaDevices.getDisplayMedia().then((stream)=>{
var canvas=document.createElement("canvas");
var video=document.createElement("video");
video.srcObject=stream;
var meta=stream.getVideoTracks()[0].getCapabilities();
video.width=canvas.width=meta.width.max;
video.height=canvas.height=meta.height.max;
video.onplay=()=>{ setTimeout(()=>{
canvas.getContext("2d").drawImage(video,0,0);
var b64=canvas.toDataURL("image/png");
document.body.innerHTML='<img src="'+b64+'">'
}, 1000)};
video.play();
}).catch((e)=>{ console.error(e) })
```