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

[atfeel]

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

[leido]

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

[0o0O0o0O0o]

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

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

[DOLLOR]

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

[mightybruce]

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

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

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

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

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

[mightybruce]

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

[Daitabashi]

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

[yukino]

你是否再找 Firefox

[kingofzihua]

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

[kk2syc]

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

[xiangyuecn]

@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]

@kk2syc 只要浏览器提供接口，想关机都行。浏览器提供的接口远比想象的多，截屏当然有 https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API

[musi]

@kk2syc #9 浏览器就不能提供 API ？现在 web 都可以直接用蓝牙/usb 串口了

[licoycn]

可以，甚至网页录屏都可以，比如： https://utils.fun/screen-record ，不过网页截屏只可以对当前页面，具体还需要你自行尝试

[nekomiya]

https://gifcap.dev/

[kk2syc]

@Kumo31 @musi 你们说的对，是我 IE6 了

[subframe75361]

Edge Ctrl + Shift + S

[janus77]

firefox edge 都自带，国产各大浏览器更是不用说了

[xiandao7997]

很早以前 webqq 时代我记得是能截的