2013-03-31 16 views
1

它可能看起来像一个非常随机的问题,但我试图找出一个黑客得到正确的字母间隔文本呈现在画布上。是否有可能以某种方式获取HTML元素作为要在画布上呈现的图像?

在谷歌搜索之后,似乎没有办法真正做到这一点。我尝试的第一件事就是将每个字符渲染成一个字符串,测量它,将它添加到偏移量,添加字母间距,但结果很差。可能是由于字体文件中包含的关于字符配对空间等信息。

我能想到的唯一一个获得完美结果的方法是将文本呈现为html元素,通过CSS设置字母间距,然后以某种方式捕获内存中的元素作为图像。我知道这不太可能,但是有没有人知道一种方法来做到这一点?

+1

http://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element – Dave

+0

链接到这个问题html2canvas该项目是疯了,海量承诺重写自己的CSS解析器哈! – jcvandan

回答

1

为什么不只是将HTML元素移动到画布上?

<canvas style="background-color:cyan; left:100px; right:100px; width:100px; height:100px; position:absolute" > 
</canvas> 
<p style="left:120px; right:100px; position:absolute; z-index:100; ">this is a test</p> 
+0

这就是我现在正在做的事情,并且可能是这样做,或者在服务器上创建一个映像并返回到客户端。这样做的唯一方法是你没有得到画布转换等的力量,但嘿,这是一个解决方案! – jcvandan

+0

如果您在服务器上渲染它,您必须决定使用哪种浏览器/设备/屏幕分辨率进行渲染。 –

+0

虽然如果它是一个固定的宽度肯定是我唯一需要担心的是视网膜显示?? – jcvandan

相关问题