使用 HTML5/Canvas/JavaScript 拍摄浏览器内屏幕截图

javascript html canvas screenshot html2canvas

2022-08-29 22:09:07

Google 的“报告错误”或“反馈工具”可让您选择浏览器窗口的某个区域来创建屏幕截图，该屏幕截图将随您对错误的反馈一起提交。

Google Feedback Tool Screenshot _{截图由Jason Small提供，发布在重复的问题中。}

他们是怎么做到的？Google的JavaScript反馈API是从这里加载的，他们对反馈模块的概述将演示屏幕截图功能。

答案 1

JavaScript 可以读取 DOM，并使用呈现相当准确的表示形式。我一直在研究一个将HTML转换为画布图像的脚本。今天决定将其实现为发送反馈，就像您描述的那样。canvas

该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于DOM，因此可能无法100%准确地反映实际表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。HTML2Canvas脚本本身仍处于非常实验的状态，因为它没有解析我想要的CSS3属性，也没有任何支持加载CORS图像，即使代理可用。

浏览器兼容性仍然相当有限（不是因为不支持更多，只是没有时间让它更支持跨浏览器）。

编辑html2canvas脚本现在在这里单独提供，在这里有一些例子。

编辑 2另一个确认Google使用非常相似的方法（实际上，基于文档，唯一的主要区别是它们的遍历/绘制的异步方法）可以在Google反馈团队的Elliott Sprehn的演示文稿中找到：http://www.elliottsprehn.com/preso/fluentconf/

答案 2

您的 Web 应用现在可以使用以下命令截取客户端整个桌面的“本机”屏幕截图：getUserMedia()

看看这个例子：

客户端必须使用chrome（目前），并且需要在 chrome://flags 下启用屏幕捕获支持。