[Flex]带有增加水印的图片上传控件--KUpload v0.2教程和测试地址(2007年4月13日更新)

2007年4月13日更新:

这次的更新内容主要是包括:

1、增加了一个关于图片下载到本地的功能。
2、修改了两处ProgressBar载入进度载入进度不准确的地方。

2007年4月10日更新:

前几天继续写FBW,由于不少的朋友提出了要改善用户体验这个重要的环节,所以总是在思考如何能真正的加强用户体验这方面的事情,所以这个控件就搁浅了。

关于这个控件的想法,我已经考虑好久了,但是一直苦于没有时间付诸实践,终于在周末的时候把它给实现了!

先说说这个软件的原理吧,呵呵其实很简单。

首先,使用Flex中现成的方法FileReference+asp.net的配合就可以完成对图片的上传工作,当图片成功的上传到server端后,然后准备2个image,其中一个作为 water image 另一个作为target image 他们同样都addChildAt到一个Canvas,然后我们就可以对这个Canvas进行操作了,这里有一个注意的地方,就是water image的位置必须比target的位置高,也就是说water image的index应该比target image的index大,并且Flex中的addChildAt中的控件加入、删除方法遵循先进后出形式,这点很重要。ok,当把这个两个imageaddChildAt到Canvas后。我们就把Canvas转换为Bitmpadata,因为在Flex中每个控件最终都会转换为Bitmapdata的,所以我们直接可以把Canvas转换为Bitmapdata,那么取得Bitmapdata有什么意义呢?因为我们需要将Canvas中的2个image,彻底转换为byteArray,这样才能被server端的C#所接受,因为在c#中的二进制可以转换为image数据,所以在Flex端我们需要这么处理一下,现在大家可以得到Bitmapdata了,然后在用adobe提供一个PNGEncoder将这个Bitmapdata转换为byteArray,那么到现在,我们想要的byteArray就出现了。Flex以webservice的形式不支持传送byteArray,我们只要将byteArray再次转换为String类型,这样webservice就支持了!那么如何转换呢?我们使用Base64这个函数,Base64这个函数应用的地方非常的广泛,例如大家一直使用的邮件的客户端基本上就是使用Base64来进行图片的传送,关于Base64就不再多说了!ok经过Base64的转换大家可以得到一个String,在由webservice发送到c#端,而c#端只要做的就是将发送过来的string再次还原成为byte[],然后再用BinaryWriter对byte[]进行写入到image的过程。以上就是关于如何上传图片并加上水印后在保存图片到service端的过程。

按照流程来说就是:上传→增加水印→Bitmapdata→PNGEncoder→Base64→得到string发送到c#端→还原成为byte []后通过BinaryWriter写image!

这个控件的功能:

1、可以对任意图片格式进行增加水印效果。
2、可以对增加完水印的图片进行浏览并在选择是否保存到服务器上。
3、借鉴了上一个程序FBW的建议,使其用户体验方面有所增强,用户可以快速的上手。 

这个就是KUpload的测试地址:http://webservice.k-zone.cn/test.swf

不足之处:

1、由于是Alpha版,可能会存在异常bug。
2、每次只能上传一个图片。
3、由于所有的操作都是基于网络进行的,可能会出现图片在上传、增加水印、保存这个3个阶段变慢的情况!

关于文中提到的Base64和PNGEncoder下载点地址:http://webservice.k-zone/Utils.rar

PS:本篇post即为Apollo Blog Writer Alpha 1.1.021所写!