1

我有以下简单的html：

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

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

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

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

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

回答：

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

4

2 回答 2

4

最好的方法是将其放在隐藏容器中的 DOM 上，让浏览器协调 html 中的错误（未关闭的标签等），然后简单地迭代该容器中的元素。最好使用 jQuery。对于你得到的每个节点，你可以让 jquery 给你标签名、类名、样式属性或任何你需要的东西、里面的文本、宽度和高度以及你需要的所有东西。将其绘制到画布上，然后使用该元素的子节点，依此类推，直到完成。HTML2Canvas 库做同样的事情。它依靠浏览器告诉它字体大小和颜色以及 z-index 和节点顺序等等。

即使对于像您这样的简单 html，这样做也会为您节省大量时间和麻烦。

于 2013-04-16T11:06:33.393 回答
1

也许您只需要可以在canvas元素上呈现 HTML 的东西？这样页面的“屏幕截图”就会绘制在canvas.

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

于 2013-04-16T10:57:58.967 回答