博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用html5+flash两种方案实现前端长文转图
阅读量:5290 次
发布时间:2019-06-14

本文共 973 字,大约阅读时间需要 3 分钟。

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

 

 

 

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

作者:绿色花园

出处: 

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

 

 

 

 

转载于:https://www.cnblogs.com/cos2004/archive/2012/12/18/2823982.html

你可能感兴趣的文章
python使用easyinstall安装xlrd、xlwt、pandas等功能模块的方法
查看>>
一个杯子的测试用例
查看>>
前端面试总结——http、html和浏览器篇
查看>>
CS0103: The name ‘Scripts’ does not exist in the current context解决方法
查看>>
20130330java基础学习笔记-语句_for循环嵌套练习2
查看>>
openCV(一)---将openCV框架导入iOS工程中
查看>>
Spring面试题
查看>>
窥视SP2010--第一章节--SP2010开发者路线图
查看>>
一步步学习微软InfoPath2010和SP2010--第五章节--添加逻辑和规则到表单(2)--处理验证与格式化...
查看>>
在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。...
查看>>
MVC,MVP 和 MVVM 的图示,区别
查看>>
IDEA快速实现接口快捷方式
查看>>
用默认的打开方式打开本地文件
查看>>
JavaScript-jQuery报TypeError $(...) is null错误(jQuery失效)解决办法
查看>>
C语言栈的实现
查看>>
代码为什么需要重构
查看>>
SAP销售模块塑工常见问题和解决方案(自己收藏)
查看>>
事后诸葛亮博客
查看>>
TC SRM 593 DIV1 250
查看>>
SRM 628 DIV2
查看>>