文转图是比较常见的web应用。特别在微博里,由于限制了字数,所以网上出现了不少把一段文字转为图片的方法,主要有以下几种:
实现难度 | 文本格式 | 数据量 | 服务器压力 | 兼容性 | |
Flash方法 | 低 | 丰富 | 高 | 小 | 一般 |
HTML5方法 | 低 | 简单 | 高 | 小 | 一般 |
后台方法 | 一般 | 丰富 | 低 | 大 | 好 |
优缺点从上图可见一斑。
- flash和后台实现的文转图的方案比较常见,而且配合html富文本编辑器还可以实现丰富的文本格式。
- 由于是图片数据是前端生成,所以flash和html5的方法发送的数据量会大点,但是服务器的压力相应会减少。
- html5 canvas由于只适合高端浏览器,所以不支持canvas的还得降级用flash支持。
下面讨论用html5+flash实现常见的文转图功能,这种组合能比较好适应各种平台。
1、html5 canvas方法:适用于pc高端浏览器和移动端
①用drawImage画上背景(图片,图片数据可以从<img>标签里拿或new Image()),或用其他api画上纯色
②用fillText画文本。可设置字体、大小、颜色等等属性。由于这个接口不支持文本自动(手动)换行,我们可以先把文本转为数组,按照一定的字数为一项,转为一个数组,再多次调用fillText画文本。
③最后用toDataURL生成图片数据。这里要注意一下,如果上面用的背景图片是和document不同域的话会报安全错误。可以把图片放在和document一个域下或把图片转为base64。
④ajax post上面的图片数据
2、flash方法:适用于ie8及以下浏览器
①Sprite填充背景
②用TextField的text或htmlText填充,设置文本样式,然后addChild到上面的Sprite里
③用bitmapData draw图片
④转码为jpeg数据
⑤URLLoader发送数据
==================================================
作者:绿色花园
出处:
==================================================