将 css3 转换后的元素渲染到画布/图像答案

【问题标题】：Render css3 transformed elements to canvas / image将 css3 转换后的元素渲染到画布/图像
【发布时间】：2012-03-18 20:28:08
【问题描述】：

基本上，我想将页面的某个 DOM 元素保存为图像，并将其存储在服务器上（并且还允许用户将图像保存到本地磁盘）。我认为目前这样做的唯一方法是渲染一个画布，它允许我通过 AJAX 发送图像数据并在 DOM 中制作图像元素。我为此找到了promising library，但是我的 DOM 元素有

而 html2canvas 在那里根本就失败了。目前有什么方法可以巧妙地保存 DOM 元素当前状态的图像表示，以及它所有的 CSS3 荣耀吗？

【问题讨论】：

我浏览了这个很有前途的库、文档和示例，甚至下载了它。发现页面被html2canvas.Preload(element, options)转换为dom；但是如何触发截图以及如何保存呢？

【解决方案1】：

浏览器可能永远不会允许将 DOM 元素真正呈现到画布上，因为这样做存在非常严重的安全问题。

您最好的选择是 html2canvas 加上您自己的 hack。您可能只需要以自定义方式实现自己的渲染代码。多个背景应该可以通过 drawImage 调用实现，并且当 canvas 2D 获得 setTransform() 时，您可能能够在 css3 转换中工作（我认为这只是在下一版本的规范中）。

【讨论】：

【解决方案2】：

在 CSS3 开发和跨浏览器支持的这个阶段，如果不编写自己的 html2canvas 扩展，这可能是不可能的。

您可以尝试深入研究 Google Chrome 错误报告器，因为它们允许您发送网页的当前快照。但我认为这是一些在 JS api 中不可用的内部函数。

另外，我认为这很容易被滥用来监视用户，所以不要指望浏览器开发团队提供任何官方支持。

【讨论】：