将 DOM 内容渲染到 Canvas答案

【问题标题】：Rendering DOM contents to Canvas将 DOM 内容渲染到 Canvas
【发布时间】：2013-06-09 21:58:40
【问题描述】：

我有几个 html 元素（div/span 等）。我希望我的 HTML5 Canvas 能够读取该 html 并按原样呈现它。稍后我将在canvas.toDataURL() 的帮助下将其转换为字节并保存为图像

我不是在寻找基于插件的解决方案，这专门针对 IE9/10 感谢对此的任何帮助！

【问题讨论】：

大多数情况下，由于安全/隐私限制，您会被阻止执行此类操作。
这不是我关心的问题，因为这不是公共页面
这对您来说是一个问题，因为浏览器不会关心您是否认为这是一个公共页面，它会尽力保护您的隐私和安全。
即使你说不，我仍然会建议一个插件。 你真的愿意从头开始创建一个 html 解析器来分析你的 div 吗？或者，既然您似乎有一个固定的用户群，那么仅仅分发一个屏幕捕获应用程序怎么样？

标签： html internet-explorer dom canvas

【解决方案1】：

你也许可以使用这个解决方案：

https://github.com/niklasvh/html2canvas

html2canvas( [ document.body ], {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
        }
});

注意：如果图像是从非来源加载的（并且没有设置接受标头），它将不会显示。

您可以选择使用您的服务器作为代理来获取图像并将它们提供给客户端：

<img src="http://myserver.com/getexternalimage?http....

【讨论】：