javascript 使用 HTML5 Canvas 捕获网页的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6468897/
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
Use HTML5 Canvas to capture part of a web page?
提问by Richard
I know that you can capture images from an HTML5 video stream using canvas and display them on the page. What I am interested in is can you use the canvas object to create an overlay on top of a web page and then capture a PNG snapshot of that page or part of it.
我知道您可以使用画布从 HTML5 视频流中捕获图像并将它们显示在页面上。我感兴趣的是您是否可以使用画布对象在网页顶部创建叠加层，然后捕获该页面或其中一部分的 PNG 快照。
I would like to enhance our website reviewing tools by adding screen capture (within the browser page) which could then be submitted to a remote server.
我想通过添加屏幕截图（在浏览器页面内）来增强我们的网站工具，然后可以将其提交到远程服务器。
YouTrack does this with a Java applet but is it possible with modern HTML5 techniques?
YouTrack 使用 Java 小程序完成此操作，但使用现代 HTML5 技术是否可行？
Any other suggested solutions to this problem would also be appreciated.
对此问题的任何其他建议解决方案也将不胜感激。
Thanks
谢谢
采纳答案by Simon Sarris
This gets asked a lot. The short answer is that it can't be done for security reasons.
这被问了很多。简短的回答是出于安全原因不能这样做。
The longer answers include mention of the drawWindowfunction that only FireFox has, which only works locally (again, for security reasons). In the future it may work once the user gives permission, like in the case of the Java applets of today. In the future, it might even be part of the spec and not a one-off thing done by Mozilla.
较长的答案包括提到drawWindow只有 FireFox 具有的功能，该功能只能在本地运行（同样，出于安全原因）。将来，一旦用户授予许可，它就可以工作，就像今天的 Java 小程序一样。在未来，它甚至可能成为规范的一部分，而不是 Mozilla 一次性完成的事情。
If you're feeling crazy, you could attempt to make an entire HTML renderer, take the DOM tree for the page, and attempt to render it in Canvas. This is a fool's errand.
如果您感觉很疯狂，您可以尝试制作一个完整的 HTML 渲染器，获取页面的 DOM 树，并尝试在 Canvas 中进行渲染。这是一个傻瓜的差事。
回答by Niklas
You can "emulate" the screen view by reading the DOM and creating a canvas image with javascript from it. Have a look at http://hertzen.com/experiments/jsfeedback/and the underlying html2canvasscript to get an idea how you can do it with purely Javascript (no plugins or server interaction necessary).
您可以通过读取 DOM 并使用 javascript 从中创建画布图像来“模拟”屏幕视图。查看http://hertzen.com/experiments/jsfeedback/和底层html2canvas脚本，了解如何使用纯 Javascript（无需插件或服务器交互）来完成它。
回答by RWHepburn
This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
此脚本允许您直接在用户浏览器上拍摄网页或其部分的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确真实呈现，因为它不会制作实际屏幕截图，而是根据页面上的可用信息构建屏幕截图。
回答by user7610
There is a possibility to embed your HTML in a SVG image and render that SVG into canvas. There are limitations as to what the HTML can contain (e.g. no JavaScript and no external resources so images must be encoded in data URLs). Keeping that in mind, it may do your job.
可以将 HTML 嵌入到 SVG 图像中并将该 SVG 渲染到画布中。HTML 可以包含的内容是有限制的（例如，没有 JavaScript 和外部资源，因此图像必须在数据 URL 中编码）。记住这一点，它可能会完成你的工作。
This technique is documented and demoed on MDN.
该技术在 MDN 上有文档和演示。
