如何在 JavaScript 客户端截取网站/谷歌是如何做到的？（无需访问硬盘）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5621907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)
提问by Pawe? Szymański
I'm working on web application that needs to render a page and make a screenshot on the client (browser) side.
我正在开发需要呈现页面并在客户端（浏览器）端制作屏幕截图的 Web 应用程序。
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.
不过，我不需要将屏幕截图保存在本地硬盘上，只需将其保存在 RAM 中并稍后将其发送到应用程序服务器。
I researched:
我研究过：
- BrowserShots alike services...
- Mechanized browsers...
- wkhtmltoimage...
- Python WebKit2PNG...
- BrowserShots 类似服务...
- 机械化浏览器...
- 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 encodingand two other huge scripts which I can't determine what exactly they do...
最终我找到了谷歌的反馈工具（点击 YouTube 页脚上的“反馈”来查看这个）。它包含用于 JPG 编码的 JavaScript和另外两个巨大的脚本，我无法确定它们究竟是做什么的......
But it's processed on the Client side - otherwise there would be no point putting this huge JPEG encoder in the code!
但它是在客户端处理的 - 否则将这个巨大的 JPEG 编码器放在代码中是没有意义的！
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)
这是反馈的示例（报告某些屏幕上的错误）
回答by Vaibhav Garg
"Using HTML5/Canvas/JavaScript to take screenshots" answers your problem.
“使用 HTML5/Canvas/JavaScript 截取屏幕截图”回答您的问题。
You can use JavaScript/Canvas to do the job but it is still experimental.
您可以使用 JavaScript/Canvas 来完成这项工作，但它仍处于试验阶段。
回答by Al Joslin
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.
我需要在受 JWT 保护并大量使用 Angular 的页面（对于我编写的 web 应用程序）上快照一个 div。
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.
我最终获取了我需要的 div 的外层 HTML，将其清理了一点 (*)，然后将其发送到我对它运行 wkhtmltopdf 的服务器。
This is working verywell 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
(*) 我的页面中的各种输入设备在以 pdf 格式查看时未呈现为已检查或具有它们的文本值......所以我在发送它以进行呈现之前在 html 上运行了一点点 jQuery。例如：对于文本输入项——我将它们的 .val() 复制到“值”属性中，然后可以通过 wkhtmlpdf 看到
