使用 HTML5/Canvas/JavaScript 在浏览器中截取屏幕截图 [英] Using HTML5/Canvas/JavaScript to take in-browser screenshots

问题描述

Google 的报告错误"或反馈工具"允许您选择浏览器窗口的一个区域来创建屏幕截图，并随您对错误的反馈提交.

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.

_{Jason Small 的截图，发布在一个重复问题中.}

他们是怎么做到的?Google 的 JavaScript 反馈 API 从这里和他们对反馈模块的概述将演示截图功能.

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.

推荐答案

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

JavaScript can read the DOM and render a fairly accurate representation of that using canvas. I have been working on a script which converts HTML into a canvas image. Decided today to make an implementation of it into sending feedbacks like you described.

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

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.

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

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.

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

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/

编辑html2canvas 脚本现在可以单独使用这里和一些示例.

edit The html2canvas script is now available separately here and some examples here.

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

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/

这篇关于使用 HTML5/Canvas/JavaScript 在浏览器中截取屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！