这是一个创建于 2067 天前的主题，其中的信息可能已经有所发展或是发生改变。
想请教下各位，网页能做到像 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