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

2024 年 8 月 18 日
 atfeel

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

3656 次点击
所在节点    程序员
18 条回复
leido
2024 年 8 月 18 日
截图网页内业务可以,截图系统别想了
0o0O0o0O0o
2024 年 8 月 18 日
AV1
2024 年 8 月 18 日
navigator.mediaDevices.getDisplayMedia()
不过使用条件比较严格( HTTPS ),而且一般水平的前端开发者玩不来。
mightybruce
2024 年 8 月 18 日
谷歌 chrome 自带截图
键点击页面并打开检查器。

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

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

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

在黑色工具栏的右上角有三个点组成的菜单,在该菜单中你可以进行全屏截图
mightybruce
2024 年 8 月 18 日
插件截图比较容易,尤其是那种懒加载,需要滚动不断下拉的页面,
我用过的一个插件叫做 awesome screenshot 截图录屏
Daitabashi
2024 年 8 月 18 日
@leido 在线笔试时好像能共享整个桌面, 应该是有接口的吧, 一个对话框就共享了
yukino
2024 年 8 月 18 日
你是否再找 Firefox
kingofzihua
2024 年 8 月 18 日
v1
2024 年 8 月 18 日
@Daitabashi 不安装扩展或者插件不可能的吧,纯 web 在浏览器内的怎么溢出到系统层?
xiangyuecn
2024 年 8 月 18 日
@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) })
```
Kumo31
2024 年 8 月 18 日
@kk2syc 只要浏览器提供接口,想关机都行。浏览器提供的接口远比想象的多,截屏当然有 https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API
musi
2024 年 8 月 18 日
@kk2syc #9 浏览器就不能提供 API ?现在 web 都可以直接用蓝牙/usb 串口了
licoycn
2024 年 8 月 18 日
可以,甚至网页录屏都可以,比如: https://utils.fun/screen-record ,不过网页截屏只可以对当前页面,具体还需要你自行尝试
nekomiya
2024 年 8 月 18 日
v1
2024 年 8 月 18 日
@Kumo31 @musi 你们说的对,是我 IE6 了
subframe75361
2024 年 8 月 18 日
Edge Ctrl + Shift + S
rb6221
2024 年 8 月 19 日
firefox edge 都自带,国产各大浏览器更是不用说了
xiandao7997
2024 年 8 月 19 日
很早以前 webqq 时代我记得是能截的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.xtra.eu.org/t/1065874

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX