这是一个创建于 2432 天前的主题，其中的信息可能已经有所发展或是发生改变。
想请教下各位，网页能做到像 QQ 截图 那样吗？提供一个图标，点击之后触发某个事件，实现像 QQ 截图 那样的功能；如果没有，有没有其他解决方案；或者说，现在浏览器截图的最优方案是什么呢？
12 条回复 2019-04-29 11:57:00 +08:00
 | 1 beastk 2019-04-28 20:07:34 +08:00 via iPhone 貌似都是 canvas 截图，还有 firefox 自带的截图挺好用 |
 | 2 poisedflw 2019-04-28 20:13:41 +08:00 html to canvas. |
 | 3 santana2000 2019-04-28 20:17:33 +08:00 via iPhone 把 html2canvas 封装到一个函数里点击调用就可以 |
 | 4 cutpictureboyxx 2019-04-28 20:17:59 +08:00 via iPhone 提供一个思路，前端实现一个框，把框的坐标和浏览器大小传给后台，后台用无头浏览器实现截图再传给后台，这种应该是最真的 |
 | 5 caomu 2019-04-28 20:33:34 +08:00 via Android @cutpictureboyxx 认证页面呢？ |
 | 6 plqws 2019-04-28 20:38:37 +08:00 webrtc 也是一个思路 |
 | 7 en20 2019-04-28 23:55:28 +08:00 via iPhone 以前做过一个保存战绩页面，就是用 html2canvas 然后过渡动画加声音假装截图。html2canvas 会有一些问题比如图片不能跨域，布局错位。前端截图没有很好的解决方案都有这样那样的问题 |
 | 8 davin 2019-04-28 23:56:40 +08:00 via iPhone Chrome 下 F12 打开调试工具，按下 Ctrl + Shift + P 组合键，在弹层里输入 screenshot 关键字，可以尝试区域截图、全尺寸截图、按节点截图和可视区域截图几种方式。再复杂一些的估计得借助插件了。 |
 | 9 vertigo 2019-04-29 01:19:37 +08:00 via iPhone 正好前几天做过截图，如果能前段截图最好使用 html2canvas 再转化成 base64 图片，可以配置图片跨域。这个方案的缺点是偶尔会有诡异的错位。另一种无头浏览器的方案，点击后后端模拟渲染。但是缺点是图片很糊而且耗费资源，建议全局使用 rem 单位，直接将 html 的 font-size 设为原本的三倍这样截大图后压缩会清晰的多 |
 | 10 Karpov 2019-04-29 08:41:03 +08:00  1 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 操纵浏览器实现 |
 | 11 zqx 2019-04-29 10:07:54 +08:00 via Android 不局限浏览器的话 node 有一堆库，都是和 qq 截图一样的功能 |
 | 12 mytry 2019-04-29 11:57:00 +08:00 1 别说截图，录屏都可以实现。Chrome 72+ / FireFox 66+ 支持 Media Devices API，可以把屏幕数据转成数据流。 可以在控制台里试试：navigator.mediaDevices.getDisplayMedia() 会弹出窗口，让你选哪个窗口（或者整个屏幕）录制。 |
Select Language