使用HTML5 Canvas捕获网页的一部分？

Question

我知道您可以使用画布从HTML5视频流中捕获图像并在页面上显示它们。我感兴趣的是你可以使用canvas对象在网页上创建一个叠加层，然后捕获该页面或其中一部分的PNG快照。

我想通过添加屏幕截图（在浏览器页面内）来增强我们的网站审阅工具，然后可以将其提交到远程服务器。

YouTrack使用Java applet实现这一点，但现代HTML5技术是否可行？

对此问题的任何其他建议的解决方案也将不胜感激。

由于

Answer 1

您可以通过读取DOM并使用javascript创建画布图像来“模拟”屏幕视图。查看http://hertzen.com/experiments/jsfeedback/和基础html2canvas脚本，了解如何使用纯Javascript（无需插件或服务器交互）。

Answer 2

这被问了很多。简短的回答是出于安全原因无法完成。

较长的答案包括提及只有FireFox的drawWindow功能，该功能仅在本地工作（出于安全原因，再次）。将来，一旦用户授予权限，它就可以工作，就像今天的Java applet一样。在未来，它甚至可能是规范的一部分，而不是Mozilla完成的一次性事情。

如果你感到疯狂，你可以尝试创建一个完整的HTML渲染器，为页面获取DOM树，并尝试在Canvas中渲染它。这是一个傻瓜的差事。

Answer 3

此脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

http://html2canvas.hertzen.com/

Answer 4

有可能将您的HTML嵌入SVG图像并将该SVG渲染到画布中。 HTML可以包含的内容存在限制（例如，没有JavaScript，也没有外部资源，因此必须在数据URL中编码图像）。牢记这一点，它可能会起到你的作用。

此技术已记录并演示on MDN。