Flex中利用ByteArray与BitmapData互相转换实现图片的二进制保存与复原

本文为转载，原文地址： http://hjy2099.javaeye.com/blog/260329

 

近日在项目当中需要将图片保存到共享对象当中，开始用了俩天的时间做了对象的序列化，并以BitmapData的形式进行了图片的序列化保存共享，因为系统没有提供更好的接口所以无法测试，前天写好了测试代码，结果对象的其他类型的属性都可以访问了，但图片就是复原不了，到各大论天，技术网站考究了一天也没有答案，
只有“KingLong's”的“[AS3]BitmapBytes类-实现BitmapData与ByteArray(Base64)之间互转功能”一篇文章，看了半天，研究了半天，结果他把一个核心的类没有公开，我发了几次请求人家都没有给回，失败啊！无奈自己多花一点时间吧，这个是必须解决的。研究俩天终于在下午四点成功了，心情甚爽，晚上还改善了生活！
  此问题在网上问的人太多了，但是高手就是觉得自己牛逼，不告诉你，菜鸟需要几天的时间甚至还会以失败告终，所以我今天贴出来供大家参考。转载请注明出处！！！谢谢合作
此类可以将一个可是组件读取为图像，并且以二进制形式进行序列化共享，还提供了二进制读取为Bitmap的方法，将图片的source属性直接赋值为本方法就可以了。此方法flex项目当中防止图片链接断开的最好解决办法。
注：本人水平太差，不知道怎样得出此方法的图片压缩和存储效率，仅是实现了功能！
下面是完整的类

1. package com.kyit.lg.util 
2. { /* 
3.   author：李广业 
4.   */ 
5. import flash.display.Bitmap; 
6. import flash.display.BitmapData; 
7. import flash.geom.Rectangle; 
8. import flash.utils.ByteArray; 
9. import mx.core.UIComponent; 
10. public class BitmapBytes 
11. { 
12.   public function BitmapBytes() 
13.   { 
14.   super(); 
15.   } 
16.   //将可视的UIComponent组件转换为ByteArray数组，我就是在UIComponent那里放了一个图片 
17.   public static function BitmapDataToByteArray(target : UIComponent):ByteArray{ 
18.   var imageWidth:uint = target.width; 
19.   var imageHeight:uint = target.height; 
20.   var srcBmp:BitmapData = new BitmapData( imageWidth, imageHeight ); 
21.   //将组件读取为BitmapData对象，bitmagData的数据源 
22.   srcBmp.draw( target ); 
23.   //getPixels方法用于读取指定像素区域生成一个ByteArray，Rectangle是一个区域框，就是起始坐标 
24.   var pixels:ByteArray = srcBmp.getPixels( new Rectangle(0,0,imageWidth,imageHeight) ); 
25.   //下面俩行将数据源的高和宽一起存储到数组中,为翻转的时候提供高度和宽度 
26.   pixels.writeShort(imageHeight); 
27.   pixels.writeShort(imageWidth); 
28.   return pixels; 
29.   } 
30.   //次方法的参数必须是像上面的ByteArray形式一样的,即需要对象的大小; 
31.   //此方法返回的Bitmap可以直接赋值给Image的source属性 
32.   public static function ByteArrayToBitmap(byArr:ByteArray):Bitmap{ 
33.   if(byArr==null){ 
34.     return null; 
35.   } 
36.   //读取出存入时图片的高和宽,因为是最后存入的数据,所以需要到尾部读取 
37.   var bmd:ByteArray= byArr; 
38.   bmd.position=bmd.length-2; 
39.   var imageWidth:int = bmd.readShort(); 
40.   bmd.position=bmd.length-4; 
41.   var imageHeight:int= bmd.readShort(); 
42.   var copyBmp:BitmapData = new BitmapData( imageWidth, imageHeight, true ); 
43.   //利用setPixel方法给图片中的每一个像素赋值,做逆操作 
44.   //ByteArray数组从零开始存储一直到最后都是图片数据,因为读入时的高和宽都是一样的,所以当循环结束是正好读完 
45.   bmd.position = 0; 
46.   for( var i:uint=0; i<imageHeight ; i++ ) 
47.   { 
48.     for( var j:uint=0; j<imageWidth; j++ ) 
49.     { 
50.       copyBmp.setPixel( j, i, bmd.readUnsignedInt() ); 
51.     } 
52.   } 
53.   var bmp:Bitmap = new Bitmap( copyBmp ); 
54.   return bmp; 
55.   } 
56. } 
57. } 

以下是mxml文件,只是我做测试用的没有进行序列化，有需要的留言给我，

 

1. <?xml version="1.0" encoding="utf-8"?> 
2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
3. <mx:Script> 
4. <![CDATA[ 
5.   import com.kyit.lg.util .BitmapBytes; 
6.   private var byteArr:ByteArray; 
7.     internal function copyToTar():void{ 
8.           //这俩个方法都是静态的，因为项目当中常用
9.           byteArr=BitmapBytes.BitmapDataToByteArray(sorImg); 
10.           tarImg.source=BitmapBytes.ByteArrayToBitmap(byteArr); 
11.   } 
12.   
13. ]]> 
14. </mx:Script> 
15.     <mx:Image x="33" y="56"  id="sorImg" source="a.jpg"/> 
16.     <mx:Image x="33" y="265"  id="tarImg" /> 
17.     <mx:Button x="33" y="26" label="a1" click="copyToTar();" /> 
18. </mx:WindowedApplication>

 

这个是AIR版的，其实RIA的也一样，我试过了。这样也解决了一个问题，就是如果后台给前台的直接是byteArray的话，那么直接用ByteArrayToBitmap这个方法就可以了。