关于 JavaScript 网页截图

[harryperlau]

想请教下各位，网页能做到像 QQ 截图 那样吗？提供一个图标，点击之后触发某个事件，实现像 QQ 截图 那样的功能；如果没有，有没有其他解决方案；或者说，现在浏览器截图的最优方案是什么呢？

[beastk]

貌似都是 canvas 截图，还有 firefox 自带的截图挺好用

[poisedflw]

html to canvas.

[santana2000]

把 html2canvas 封装到一个函数里点击调用就可以

[cutpictureboyxx]

提供一个思路，前端实现一个框，把框的坐标和浏览器大小传给后台，后台用无头浏览器实现截图再传给后台，这种应该是最真的

[caomu]

@cutpictureboyxx 认证页面呢？

[plqws]

webrtc 也是一个思路

[en20]

以前做过一个保存战绩页面，就是用 html2canvas 然后过渡动画加声音假装截图。html2canvas 会有一些问题比如图片不能跨域，布局错位。前端截图没有很好的解决方案都有这样那样的问题

[davin]

Chrome 下 F12 打开调试工具，按下 Ctrl + Shift + P 组合键，在弹层里输入 screenshot 关键字，可以尝试区域截图、全尺寸截图、按节点截图和可视区域截图几种方式。再复杂一些的估计得借助插件了。

[vertigo]

正好前几天做过截图，如果能前段截图最好使用 html2canvas 再转化成 base64 图片，可以配置图片跨域。这个方案的缺点是偶尔会有诡异的错位。另一种无头浏览器的方案，点击后后端模拟渲染。但是缺点是图片很糊而且耗费资源，建议全局使用 rem 单位，直接将 html 的 font-size 设为原本的三倍这样截大图后压缩会清晰的多

[Karpov]

pageres
流行：8k stars
仓库地址： https://github.com/sindresorhus/pageres
capture-website
流行：200 stars
仓库地址： https://github.com/sindresorhus/capture-website
pageres 本质上是调用 capture-website
capture-website 就是 @vertigo @cutpictureboyxx 提到的利用 puppeeter 操纵浏览器实现

[zqx]

不局限浏览器的话 node 有一堆库，都是和 qq 截图一样的功能

[mytry]

别说截图，录屏都可以实现。Chrome 72+ / FireFox 66+ 支持 Media ​ Devices API，可以把屏幕数据转成数据流。

可以在控制台里试试：navigator.mediaDevices.getDisplayMedia()

会弹出窗口，让你选哪个窗口（或者整个屏幕）录制。