使用 HTML5/Canvas/JavaScript 获取浏览器内屏幕截图

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

_{Screenshot by Jason Small, posted in a duplicate question https://stackoverflow.com/questions/6608327/google-style-send-feedback.}

他们是怎么做的？ Google 的 JavaScript 反馈 API 加载自here https://ssl.gstatic.com/feedback/api.js and 他们对反馈模块的概述 http://www.google.com/tools/feedback/intl/en/learnmore.html将演示屏幕截图功能。

JavaScript 可以读取 DOM 并使用以下方式呈现相当准确的表示：canvas。我一直在编写一个将 HTML 转换为画布图像的脚本。今天决定将其实施为发送您所描述的反馈。

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

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

浏览器兼容性仍然相当有限（不是因为无法支持更多浏览器，只是没有时间使其更多地支持跨浏览器）。

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

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

edithtml2canvas 脚本现在可以单独使用here https://github.com/niklasvh/html2canvas还有一些例子在这里 http://html2canvas.hertzen.com/.

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