javascript - 使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图(Using HTML5/Canvas/JavaScript to take in-browser screenshots)

Question

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug.(利用Google的“报告错误”或“反馈工具”，您可以选择浏览器窗口的区域来创建屏幕截图，并在屏幕上提交有关错误的反馈。)

_{Screenshot by Jason Small, posted in a duplicate question .}(_{Jason Small的屏幕截图，张贴在一个重复的问题中 。})

How are they doing this?(他们是如何做到的？)

Google's JavaScript feedback API is loaded from here and their overview of the feedback module will demonstrate the screenshot capability.(Google的JavaScript反馈API从此处加载， 它们对反馈模块的概述将演示屏幕截图功能。)   ask by joelvh translate from so

Answer 1

JavaScript can read the DOM and render a fairly accurate representation of that using canvas .(JavaScript可以读取DOM并使用canvas进行相当准确的表示。)

I have been working on a script which converts HTML into a canvas image.(我一直在研究将HTML转换为画布图像的脚本。) Decided today to make an implementation of it into sending feedbacks like you described.(今天决定将其实现为发送您所描述的反馈。)

The script allows you to create feedback forms which include a screenshot, created on the client's browser, along with the form.(该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。)

The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.(屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。)

It does not require any rendering from the server , as the whole image is created on the client's browser.(它不需要来自服务器的任何渲染 ，因为整个图像是在客户端的浏览器上创建的。)

The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.(HTML2Canvas脚本本身仍处于实验性状态，因为它无法解析我想要的几乎所有CSS3属性，即使有可用的代理，它也不支持加载CORS图像。)

Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).(仍然与浏览器的兼容性非常有限（不是因为无法支持更多功能，只是没有时间使其更受跨浏览器支持）。)

For more information, have a look at the examples here:(有关更多信息，请查看此处的示例：)

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

edit The html2canvas script is now available separately here and some examples here .(编辑 html2canvas脚本现在可以在此处单独使用， 在此处可以使用一些示例 。)

edit 2 Another confirmation that Google uses a very similar method (in fact, based on the documentation, the only major difference is their async method of traversing/drawing) can be found in this presentation by Elliott Sprehn from the Google Feedback team: http://www.elliottsprehn.com/preso/fluentconf/(编辑2 Google反馈小组的Elliott Sprehn在此演示文稿中可以找到另一个证实Google使用了非常相似的方法（事实上，根据文档，唯一的不同是它们的遍历/绘制异步方法）： http： //www.elliottsprehn.com/preso/fluentconf/)