关于 JavaScript 网页截图

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2071 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

截图

网页

JavaScript

12 条回复 • 2019-04-29 11:57:00 +08:00

beastk

2019-04-28 20:07:34 +08:00 via iPhone

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

poisedflw

2019-04-28 20:13:41 +08:00

html to canvas.

santana2000

2019-04-28 20:17:33 +08:00 via iPhone

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

cutpictureboyxx

2019-04-28 20:17:59 +08:00 via iPhone

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

caomu

2019-04-28 20:33:34 +08:00 via Android

@cutpictureboyxx 认证页面呢？

plqws

2019-04-28 20:38:37 +08:00

webrtc 也是一个思路

en20

2019-04-28 23:55:28 +08:00 via iPhone

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

davin

2019-04-28 23:56:40 +08:00 via iPhone

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

vertigo

2019-04-29 01:19:37 +08:00 via iPhone

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

Karpov

2019-04-29 08:41:03 +08:00

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

2019-04-29 10:07:54 +08:00 via Android

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

mytry

2019-04-29 11:57:00 +08:00

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

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

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