在Javascript中解析HTML以进行画布渲染

Question

我有以下简单的html：

<h1><i>This is a test</i> <span class="wysiwyg-color-red">Hello world</span></h1>

我想使用一组基本样式和strokeText html5 canvas api方法创建文本html到canvas转换器。

获取节点值的“树”和html html元素列表将很有用。

{ 
  "This is a test": ["i", "h1"],
  "Hello world": ["span class="wysiwyg-color-red", "h1"]
} 

由此，我将能够生成适当的画布文本样式。

回答：

http://jsfiddle.net/AUTJs/4/

Answer 1

最好的方法是将其放在隐藏容器中的DOM上，让浏览器协调html中的错误（未关闭的标签等），然后简单地迭代该容器中的元素。 最好使用jQuery。 对于获得的每个节点，您都可以要求jquery为您提供标记名，类名，样式属性或所需的任何内容，内部文本，宽度和高度以及所有您需要的东西。 将其绘制到画布上，然后使用该元素的子节点求助，依此类推，直到完成。 HTML2Canvas库执行相同的操作。 它依靠浏览器来告知它的字体大小和颜色，z索引和节点顺序等。

即使对于像您这样的简单html，用这种方法也可以节省大量时间和麻烦。

Answer 2

也许您只需要一些可以在canvas元素上呈现HTML的东西？ 这样页面的“屏幕快照”将被绘制在canvas 。

查看http://html2canvas.hertzen.com/和http://experiments.hertzen.com/jsfeedback/ 。