Flex中利用ByteArray与BitmapData互相转换实现图片的二进制保存与复原
近日在项目当中需要将图片保存到共享对象当中,开始用了俩天的时间做了对象的序列化,并以BitmapData的形式进行了图片的序列化保存共享,因为系统没有提供更好的接口所以无法测试,前天写好了测试代码,结果对象的其他类型的属性都可以访问了,但图片就是复原不了,到各大论天,技术网站考究了一天也没有答案,
只有“KingLong's”的“[AS3]BitmapBytes类-实现BitmapData与ByteArray(Base64)之间互转功能”一篇文章,看了半天,研究了半天,结果他把一个核心的类没有公开,我发了几次请求人家都没有给回,失败啊!无奈自己多花一点时间吧,这个是必须解决的。研究俩天终于在下午四点成功了,心情甚爽,晚上还改善了生活!
此问题在网上问的人太多了,但是高手就是觉得自己牛逼,不告诉你,菜鸟需要几天的时间甚至还会以失败告终,所以我今天贴出来供大家参考。转载请注明出处!!!谢谢合作
此类可以将一个可是组件读取为图像,并且以二进制形式进行序列化共享,还提供了二进制读取为Bitmap的方法,将图片的source属性直接赋值为本方法就可以了。此方法flex项目当中防止图片链接断开的最好解决办法。
注:本人水平太差,不知道怎样得出此方法的图片压缩和存储效率,仅是实现了功能!
下面是完整的类
package com.kyit.lg..util
{ /*
author:李广业
*/
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.utils.ByteArray;
import mx.core.UIComponent;
public class BitmapBytes
{
public function BitmapBytes()
{
super();
}
//将可视的UIComponent组件转换为ByteArray数组,我就是在UIComponent那里放了一个图片
public static function BitmapDataToByteArray(target : UIComponent):ByteArray{
var imageWidth:uint = target.width;
var imageHeight:uint = target.height;
var srcBmp:BitmapData = new BitmapData( imageWidth, imageHeight );
//将组件读取为BitmapData对象,bitmagData的数据源
srcBmp.draw( target );
//getPixels方法用于读取指定像素区域生成一个ByteArray,Rectangle是一个区域框,就是起始坐标
var pixels:ByteArray = srcBmp.getPixels( new Rectangle(0,0,imageWidth,imageHeight) );
//下面俩行将数据源的高和宽一起存储到数组中,为翻转的时候提供高度和宽度
pixels.writeShort(imageHeight);
pixels.writeShort(imageWidth);
return pixels;
}
//次方法的参数必须是像上面的ByteArray形式一样的,即需要对象的大小;
//此方法返回的Bitmap可以直接赋值给Image的source属性
public static function ByteArrayToBitmap(byArr:ByteArray):Bitmap{
if(byArr==null){
return null;
}
//读取出存入时图片的高和宽,因为是最后存入的数据,所以需要到尾部读取
var bmd:ByteArray= byArr;
bmd.position=bmd.length-2;
var imageWidth:int = bmd.readShort();
bmd.position=bmd.length-4;
var imageHeight:int= bmd.readShort();
var copyBmp:BitmapData = new BitmapData( imageWidth, imageHeight, true );
//利用setPixel方法给图片中的每一个像素赋值,做逆操作
//ByteArray数组从零开始存储一直到最后都是图片数据,因为读入时的高和宽都是一样的,所以当循环结束是正好读完
bmd.position = 0;
for( var i:uint=0; i<imageHeight ; i++ )
{
for( var j:uint=0; j<imageWidth; j++ )
{
copyBmp.setPixel( j, i, bmd.readUnsignedInt() );
}
}
var bmp:Bitmap = new Bitmap( copyBmp );
return bmp;
}
}
}
以下是mxml文件,只是我做测试用的没有进行序列化,有需要的留言给我,
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import com.kyit.lg.util .BitmapBytes;
private var byteArr:ByteArray;
internal function copyToTar():void{
//这俩个方法都是静态的,因为项目当中常用
byteArr=BitmapBytes.BitmapDataToByteArray(sorImg);
tarImg.source=BitmapBytes.ByteArrayToBitmap(byteArr);
}
]]>
</mx:Script>
<mx:Image x="33" y="56" id="sorImg" source="a.jpg"/>
<mx:Image x="33" y="265" id="tarImg" />
<mx:Button x="33" y="26" label="a1" click="copyToTar();" />
</mx:WindowedApplication>
只有“KingLong's”的“[AS3]BitmapBytes类-实现BitmapData与ByteArray(Base64)之间互转功能”一篇文章,看了半天,研究了半天,结果他把一个核心的类没有公开,我发了几次请求人家都没有给回,失败啊!无奈自己多花一点时间吧,这个是必须解决的。研究俩天终于在下午四点成功了,心情甚爽,晚上还改善了生活!
此问题在网上问的人太多了,但是高手就是觉得自己牛逼,不告诉你,菜鸟需要几天的时间甚至还会以失败告终,所以我今天贴出来供大家参考。转载请注明出处!!!谢谢合作
此类可以将一个可是组件读取为图像,并且以二进制形式进行序列化共享,还提供了二进制读取为Bitmap的方法,将图片的source属性直接赋值为本方法就可以了。此方法flex项目当中防止图片链接断开的最好解决办法。
注:本人水平太差,不知道怎样得出此方法的图片压缩和存储效率,仅是实现了功能!
下面是完整的类
package com.kyit.lg..util
{ /*
author:李广业
*/
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.utils.ByteArray;
import mx.core.UIComponent;
public class BitmapBytes
{
public function BitmapBytes()
{
super();
}
//将可视的UIComponent组件转换为ByteArray数组,我就是在UIComponent那里放了一个图片
public static function BitmapDataToByteArray(target : UIComponent):ByteArray{
var imageWidth:uint = target.width;
var imageHeight:uint = target.height;
var srcBmp:BitmapData = new BitmapData( imageWidth, imageHeight );
//将组件读取为BitmapData对象,bitmagData的数据源
srcBmp.draw( target );
//getPixels方法用于读取指定像素区域生成一个ByteArray,Rectangle是一个区域框,就是起始坐标
var pixels:ByteArray = srcBmp.getPixels( new Rectangle(0,0,imageWidth,imageHeight) );
//下面俩行将数据源的高和宽一起存储到数组中,为翻转的时候提供高度和宽度
pixels.writeShort(imageHeight);
pixels.writeShort(imageWidth);
return pixels;
}
//次方法的参数必须是像上面的ByteArray形式一样的,即需要对象的大小;
//此方法返回的Bitmap可以直接赋值给Image的source属性
public static function ByteArrayToBitmap(byArr:ByteArray):Bitmap{
if(byArr==null){
return null;
}
//读取出存入时图片的高和宽,因为是最后存入的数据,所以需要到尾部读取
var bmd:ByteArray= byArr;
bmd.position=bmd.length-2;
var imageWidth:int = bmd.readShort();
bmd.position=bmd.length-4;
var imageHeight:int= bmd.readShort();
var copyBmp:BitmapData = new BitmapData( imageWidth, imageHeight, true );
//利用setPixel方法给图片中的每一个像素赋值,做逆操作
//ByteArray数组从零开始存储一直到最后都是图片数据,因为读入时的高和宽都是一样的,所以当循环结束是正好读完
bmd.position = 0;
for( var i:uint=0; i<imageHeight ; i++ )
{
for( var j:uint=0; j<imageWidth; j++ )
{
copyBmp.setPixel( j, i, bmd.readUnsignedInt() );
}
}
var bmp:Bitmap = new Bitmap( copyBmp );
return bmp;
}
}
}
以下是mxml文件,只是我做测试用的没有进行序列化,有需要的留言给我,
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import com.kyit.lg.util .BitmapBytes;
private var byteArr:ByteArray;
internal function copyToTar():void{
//这俩个方法都是静态的,因为项目当中常用
byteArr=BitmapBytes.BitmapDataToByteArray(sorImg);
tarImg.source=BitmapBytes.ByteArrayToBitmap(byteArr);
}
]]>
</mx:Script>
<mx:Image x="33" y="56" id="sorImg" source="a.jpg"/>
<mx:Image x="33" y="265" id="tarImg" />
<mx:Button x="33" y="26" label="a1" click="copyToTar();" />
</mx:WindowedApplication>