如何在 JavaScript 客户端中截取网站/Google 是如何做到的？ （无需访问硬盘）
我正在开发需要渲染页面并在客户端（浏览器）端进行屏幕截图的网络应用程序。
不过，我不需要将屏幕截图保存在本地硬盘上，只需将其保存在 RAM 中并稍后将其发送到应用程序服务器即可。
我研究了：
- BrowserShots类似服务...
- 机械化浏览器...
- wkhtmltoimage...
- Python WebKit2PNG...
但这些都没有给我我所需要的一切，即：
- 在浏览器端处理（生成页面屏幕截图）。不需要保存在硬盘上！只需...
- ...将图像发送到服务器进行进一步处理。
- 捕获整个页面（不仅仅是可见部分）
最终我发现了 Google 的反馈工具（点击 YouTube 页脚上的“反馈”即可看到）。它包含 用于 JPG 编码的 JavaScript 和另外两个巨大的脚本，我无法确定它们到底做什么......
但它是在客户端处理的 - 否则没有必要将这个巨大的 JPEG 编码器放入代码中！
任何人都知道他们是如何做到的/我如何做到的？
以下是反馈示例（报告某些屏幕上的错误）
I'm working on web application that needs to render a page and make a screenshot on the client (browser) side.
I don't need the screenshot to be saved on the local HDD though, just kept it in RAM and send it to the application server later.
I researched:
- BrowserShots alike services...
- Mechanized browsers...
- wkhtmltoimage...
- Python WebKit2PNG...
But none of those gives me all I need, which is:
- Processing at browser side (generate screenshot of page). Don't need to be saved on HDD! Just...
- ...send image to Server for further processing.
- Capturing whole page (not only visible part)
Eventually I came upon Google's Feedback Tool (click "feedback" on YouTube footer to see this). It contains JavaScript for JPG encoding and two other huge scripts which I can't determine what exactly they do...
But it's processed on the Client side - otherwise there would be no point putting this huge JPEG encoder in the code!
Anyone have any idea how did they made it / how I can make it?
Here is an example of the feedback (report a bug on some screens)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这可以解决您的问题。
您可以使用 JavaScript/Canvas 来完成这项工作，但它仍处于实验阶段。
更新：
现在有一个库https://html2canvas.hertzen.com/< /a>
This answers your problem.
You can use JavaScript/Canvas to do the job but it is still experimental.
Update:
There is a library for this now https://html2canvas.hertzen.com/
我需要对页面上的 div（针对我编写的 web 应用程序）进行快照，该 div 受 JWT 保护，并且大量使用 Angular。
我对上述任何方法都没有运气。
我最终获取了所需 div 的外层 HTML，对其进行了一些清理（*），然后将其发送到我对其运行 wkhtmltopdf 的服务器。
这对我来说非常有效。
(*) 我的页面中的各种输入设备在 pdf 中查看时未按检查方式呈现或没有其文本值...因此，在发送 html 进行呈现之前，我在 html 上运行了一些 jQuery。例如：对于文本输入项 - 我将其 .val() 复制到“value”属性中，然后可以通过 wkhtmlpdf 查看
I needed to snapshot a div on the page (for a webapp I wrote) that is protected by JWT's and makes very heavy use of Angular.
I had no luck with any of the above methods.
I ended up taking the outerHTML of the div I needed, cleaning it up a little (*) and then sending it to the server where I run wkhtmltopdf against it.
This is working very well for me.
(*) various input devices in my pages didn't render as checked or have their text values when viewed in the pdf... So I run a little bit of jQuery on the html before I send it up for rendering. ex: for text input items -- I copy their .val()'s into 'value' attributes, which then can be seen by wkhtmlpdf