用html5+flash两种方案实现前端长文转图

文转图是比较常见的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发送数据

 

 

 

==================================================

作者：绿色花园

出处： http://www.cnblogs.com/cos2004/archive/2012/12/18/2823982.html

==================================================