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

Question

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

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

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

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

谢谢

Answer 1

这个问题被问得很多。简短的答案是，出于安全原因，不能这样做。

较长的回答包括提到只有FireFox才有的drawWindow函数，该函数只能在本地工作(同样，出于安全原因)。将来，一旦用户给出许可，它就可以工作，就像今天的Java applet一样。将来，它甚至可能成为规范的一部分，而不是Mozilla一次性完成的事情。

如果您觉得很疯狂，可以尝试创建一个完整的HTML渲染器，获取页面的DOM树，并尝试在Canvas中呈现它。这是愚蠢的差事。

Answer 2

您可以通过读取DOM并使用javascript创建一个画布图像来“模拟”屏幕视图。看一看http://hertzen.com/experiments/jsfeedback/和底层的html2canvas脚本，以了解如何使用纯Javascript (不需要插件或服务器交互)来做到这一点。

Answer 3

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

http://html2canvas.hertzen.com/