使用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转换为canvas图像的脚本。今天决定将其实现发送给你描述的反馈。

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 an 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 clients 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 clients 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脚本现在可以单独这里和一些示例在这里。

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

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