javascript - 使用 HTML5/Canvas/JavaScript 在浏览器中截屏

Question

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

_{Jason Small 的截图，发布在 duplicate question .}

他们是怎么做到的？ Google 的 JavaScript 反馈 API 从 here 加载和 their overview of the feedback module将演示截图功能。

Answer 1

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

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

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

浏览器兼容性仍然相当有限(不是因为无法支持更多，只是还没有时间让它更多地支持跨浏览器)。

有关更多信息，请查看此处的示例:

http://hertzen.com/experiments/jsfeedback/

编辑html2canvas 脚本现在可以单独使用 here还有一些 examples here .

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