使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图

HTML

伽罗卡卡西

2020-03-16

使用Google的“报告错误”或“反馈工具”，您可以选择浏览器窗口的区域来创建屏幕截图，并在屏幕上提交有关错误的反馈。

Google反馈工具截图 _{Jason Small的屏幕截图，张贴在一个重复的问题中。}

他们是如何做到的？Google的JavaScript反馈API已从此处加载，它们对反馈模块的概述将演示屏幕截图功能。

第1758篇《使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

EvaAPro 2020.03.16

您的网络应用现在可以使用getUserMedia()以下命令获取客户端整个桌面的“本地”屏幕截图：

看一下这个例子：

客户端（现在必须）必须使用chrome，并且需要在chrome：// flags下启用屏幕捕获支持。

Stafan 2020.03.16

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

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

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

仍然与浏览器的兼容性非常有限（不是因为无法支持更多功能，只是没有时间使其更受跨浏览器支持）。

编辑 html2canvas脚本现在可以在此处单独使用，在此处可以使用一些示例。

编辑2 另一个证实Google使用了非常相似的方法（实际上，根据文档，唯一的主要区别是它们的遍历/绘制异步方法）可以在Google反馈小组的Elliott Sprehn的演示文稿中找到： http： //www.elliottsprehn.com/preso/fluentconf/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android