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

2023-12-24

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

Google Feedback Tool Screenshot 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/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 HTML5/Canvas/JavaScript 获取浏览器内屏幕截图 的相关文章

随机推荐