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

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

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



喵喔喔
浏览 1979回答 3
3回答

不负相思意

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

暮色呼如

在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);源代码和更广泛的示例在这里。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5