Google的“报告错误”或“反馈工具”可让您选择浏览器窗口的某个区域,以创建提交的屏幕截图,其中包含有关错误的反馈 .
截图Jason Small,发表在一个重复的问题 .
他们是怎么做到的? Google的JavaScript反馈API从here加载,their overview of the feedback module将演示屏幕截图功能 .
Google的“报告错误”或“反馈工具”可让您选择浏览器窗口的某个区域,以创建提交的屏幕截图,其中包含有关错误的反馈 .
截图Jason Small,发表在一个重复的问题 .
他们是怎么做到的? Google的JavaScript反馈API从here加载,their overview of the feedback module将演示屏幕截图功能 .
3 回答
作为Niklas mention,您可以使用html2canvas库使用js浏览器制作屏幕截图 . 我将通过提供使用此库制作屏幕截图的示例(在此问题框架中)来开发他的答案:
在_134256_函数中
onrendered
获取图像作为数据后,您可以将其显示给用户并允许他通过鼠标绘制"bug region"然后将屏幕截图和区域坐标发送到服务器 .在this example
async/await
版本中制作:具有漂亮的makeScreenshot()
功能 .您的网络应用现在可以使用
getUserMedia()
获取客户端整个桌面的'native'屏幕截图:看看这个例子:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
客户端必须使用chrome(现在)并且需要在chrome:// flags下启用屏幕捕获支持 .
JavaScript可以读取DOM并使用
canvas
呈现相当准确的表示形式 . 我一直在研究将HTML转换为画布图像的脚本 . 今天决定将其实施为发送您所描述的反馈 .该脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图以及表单 . 屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图 .
它 does not require any rendering from the server ,因为整个图像是在客户端的浏览器上创建的 . HTML2Canvas脚本本身仍然处于非常实验状态,因为它几乎不解析我想要的CSS3属性,即使代理可用,也没有任何支持加载CORS图像 .
仍然非常有限的浏览器兼容性(不是因为更多不能支持,只是没有时间使其更多支持跨浏览器) .
有关更多信息,请查看此处的示例:
http://hertzen.com/experiments/jsfeedback/
edit html2canvas脚本现在单独提供here和一些examples here .
edit 2 谷歌使用非常类似的方法的另一个确认(实际上,基于文档,唯一的主要区别是他们的遍历/绘图的异步方法)可以在Google翻译团队的Elliott Sprehn的演示文稿中找到:http://www.elliottsprehn.com/preso/fluentconf/