如何将HTML元素转换为canvas元素？

Question

如何将HTML元素转换为canvas元素？

能够暂时将常规元素转换为a将非常有用canvas。例如，假设我有一个div我要翻转的样式。我想动态创建一个画布，“渲染” HTMLElement到画布中，隐藏原始元素并为画布设置动画。

Answer 1

抱歉，浏览器不会将HTML呈现到画布中。如果可以，这将是一个潜在的安全风险，因为HTML可以包含来自第三方网站的内容（特别是图像和iframe）。如果canvas可以将HTML内容转换为图像然后您读取图像数据，则可能从其他站点提取特权内容。要从HTML获取画布，您必须使用drawImage和从头开始编写自己的HTML渲染器fillText，这是一项潜在的巨大任务。这里有一次这样的尝试，但它有点狡猾，距离完成还有很长的路要走。（它甚至尝试从头开始解析HTML / CSS，我认为这很疯狂！从应用了样式的真实DOM节点开始更容易，并getComputedStyle使用offsetTopet al 读取样式的部分使用和相对位置。）

Answer 2

在natevw引用的Mozdev帖子的基础上，我开始了一个小项目，在Firefox，Chrome和Safari中将HTML渲染到画布。例如，您可以简单地执行以下操作：rasterizeHTML.drawHTML('<span&nbsp;class="color:&nbsp;green">This&nbsp;is&nbsp;HTML</span>'&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'<img&nbsp;src="local_img.png"/>',&nbsp;canvas);源代码和更广泛的示例在这里。