我怎样才能将HTML元素转换为canvas元素?

暂时将常规元素转换为canvas将是非常有用的。 例如,说我有一个我想翻转的样式的div 。 我想dynamic地创build一个canvas,将HTMLElement “渲染”到canvas中,隐藏原始元素并为canvas设置animation。

可以这样做吗?

抱歉,浏览器不会将HTML呈现在canvas上。

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

要从HTML获取canvas,您必须使用drawImagefillText从头开始编写自己的HTML渲染器,这是一项潜在的巨大任务。 这里有一个这样的尝试,但这有点不妥,还有很长的路要走。 (它甚至试图从头开始分析HTML / CSS,我认为这很疯狂!从应用了样式的真正的DOM节点开始,使用getComputedStyle和它的部分的相对位置来读取样式会更容易,使用offsetTop等)

有一个图书馆试图做你说的话。

看到这个例子,并获得代码

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

http://html2canvas.hertzen.com/

从HTML中读取DOM并将其渲染到canvas上,但是在一般情况下会失败。

在natevw引用的Mozdev文章的基础上,我开始了一个小的项目,在Firefox,Chrome和Safari中呈现HTML到canvas。 例如,你可以简单地做:

 rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' + '<img src="local_img.png"/>', canvas); 

源代码和更广泛的例子在这里 。

看看MDN上的这个教程: https : //developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

它使用临时SVG图像将HTML内容包含为“外部元素”,然后将所述SVG图像呈现为canvas元素。 但是,以这种方式在SVG图像中包含的内容有很大的限制。 (有关详细信息,请参阅“安全性”部分。)

你可以使用dom-to-image库(我是维护者)。
以下是你如何解决你的问题:

 var parent = document.getElementById('my-node-parent'); var node = document.getElementById('my-node'); var canvas = document.createElement('canvas'); canvas.width = node.scrollWidth; canvas.height = node.scrollHeight; domtoimage.toPng(node).then(function (pngDataUrl) { var img = new Image(); img.onload = function () { var context = canvas.getContext('2d'); context.translate(canvas.width, 0); context.scale(-1, 1); context.drawImage(img, 0, 0); parent.removeChild(node); parent.appendChild(canvas); }; img.src = pngDataUrl; }); 

这里是jsfiddle

没有这样的事,对不起。

虽然规格说明:

2D上下文API的未来版本可以提供一种将使用CSS呈现的文档片段直接呈现给canvas的方式。

这可能会像你会得到的一样接近。

很多人想要一个ctx.drawArbitraryHTML/Elementtypes的交易,但没有内置的东西。

唯一的例外是Mozilla独有的drawWindow ,它将DOM窗口内容的快照绘制到canvas中。 此function仅适用于使用Chrome(“仅限本地”)权限运行的代码。 这是不允许在正常的HTML页面。 所以你可以使用它来编写像这样的 FireFox扩展,但就是这样。

你可以省去转换,你可以使用CSS3转换翻转<div><ol>以及任何你想要的HTML标签。 下面是一些演示源代码解释来看和学习: http : //www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

animationDOM元素的最简单的解决scheme是使用CSS转换/animation,但我认为你已经知道,你尝试使用canvas做CSS的东西不让你做的东西。 什么关于CSS自定义filter ? 如果你知道如何编写着色器,你可以用任何可以想象的方式来转换你的元素。 其他一些链接 ,不要忘记检查CSSfilter实验室 。
注意 :正如您可以想象的那样,浏览器支持不好。

 function convert() { dom = document.getElementById('divname'); var script, $this = this, options = this.options, runH2c = function(){ try { var canvas = window.html2canvas([ document.getElementById('divname') ], { onrendered: function( canvas ) { window.open(canvas.toDataURL()); } }); } catch( e ) { $this.h2cDone = true; log("Error in html2canvas: " + e.message); } }; if ( window.html2canvas === undefined && script === undefined ) { } else {. // html2canvas already loaded, just run it then runH2c(); } }