如何把html转换成canvas,html5-如何将HTML元素转换为canvas元素？

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

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

能做到吗

davemyron asked 2020-02-13T23:10:01Z

10个解决方案

49 votes

有一个图书馆尝试您所说的话。

查看此示例并获取代码

[http://hertzen.com/experiments/jsfeedback/]

[http://html2canvas.hertzen.com/]

从html读取DOM并将其呈现到画布上，虽然在某些情况下会失败，但是在一般情况下还是可行的。

Aristos answered 2020-02-13T23:10:57Z

17 votes

抱歉，浏览器无法将HTML渲染到画布中。

如果可能的话，这将带来潜在的安全风险，因为HTML可能包含来自第三方站点的内容(尤其是图像和iframe)。 如果drawImage可以将HTML内容转换为图像，然后读取图像数据，则有可能从其他站点提取特权内容。

要从HTML获得画布，您必须使用drawImage和fillText从头开始编写自己的HTML渲染器，这是一项潜在的巨大任务。 这里有这样的尝试，但是它有点狡猾，距离完成还有很长的路要走。 (它甚至尝试从头开始解析HTML / CSS，我认为这很疯狂！从具有样式的真实DOM节点开始，并使用getComputedStyle读取样式以及使用getComputedStyle读取其部分的相对位置会更容易 等)。

bobince answered 2020-02-13T23:10:19Z

8 votes

在natevw引用的Mozdev帖子的基础上，我启动了一个小项目，以在Firefox，Chrome和Safari中将HTML渲染到画布上。 因此，例如，您可以简单地执行以下操作：

rasterizeHTML.drawHTML('This is HTML'

&#