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% 准确地反射(reflect)真实情况，因为它并未制作实际屏幕截图，而是根据页面上可用的信息构建屏幕截图。

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

仍然非常有限的浏览器兼容性(不是因为不能支持更多，只是没有时间让它更多地支持跨浏览器)。

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

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

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

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