
类似 QQ 微信的截图功能,web 网页可以实现截图功能吗,以前好像见过,现在找不到了,是不是配合插件实现的呢,各位有什么思路吗
1 leido 2024 年 8 月 18 日 via Android 截图网页内业务可以,截图系统别想了 |
2 0o0O0o0O0o 2024 年 8 月 18 日 via iPhone |
3 AV1 2024 年 8 月 18 日 navigator.mediaDevices.getDisplayMedia() 不过使用条件比较严格( HTTPS ),而且一般水平的前端开发者玩不来。 |
4 mightybruce 2024 年 8 月 18 日 谷歌 chrome 自带截图 键点击页面并打开检查器。 在 Chrome 检查器的左上角,你会看到一个小手机图标。 点击那个图标,网页顶部将出现一个新的黑色工具栏。 在这个黑色工具栏中,你可以选择想要模拟的屏幕尺寸(对于桌面显示器来说,可能需要 1920x1080 ) 在黑色工具栏的右上角有三个点组成的菜单,在该菜单中你可以进行全屏截图 |
5 mightybruce 2024 年 8 月 18 日 插件截图比较容易,尤其是那种懒加载,需要滚动不断下拉的页面, 我用过的一个插件叫做 awesome screenshot 截图录屏 |
6 Daitabashi 2024 年 8 月 18 日 @leido 在线笔试时好像能共享整个桌面, 应该是有接口的吧, 一个对话框就共享了 |
7 yukino 2024 年 8 月 18 日 你是否再找 Firefox |
8 kingofzihua 2024 年 8 月 18 日 |
9 v1 2024 年 8 月 18 日 @Daitabashi 不安装扩展或者插件不可能的吧,纯 web 在浏览器内的怎么溢出到系统层? |
10 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) }) ``` |
11 Kumo31 2024 年 8 月 18 日 @kk2syc 只要浏览器提供接口,想关机都行。浏览器提供的接口远比想象的多,截屏当然有 https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API |
13 licoycn 2024 年 8 月 18 日 可以,甚至网页录屏都可以,比如: https://utils.fun/screen-record ,不过网页截屏只可以对当前页面,具体还需要你自行尝试 |
14 nekomiya 2024 年 8 月 18 日 |
16 subframe75361 2024 年 8 月 18 日 Edge Ctrl + Shift + S |
17 rb6221 2024 年 8 月 19 日 firefox edge 都自带,国产各大浏览器更是不用说了 |
18 xiandao7997 2024 年 8 月 19 日 via iPhone 很早以前 webqq 时代我记得是能截的 |