flex Image,Bitmap, BitmapData、ByteArray相互关系和转换
flex中针对Image、Bitmap、BitmapData的操作支持非常灵活,简单整理下:
1、 设置Image组件的source(指定图片路径)属性引入图片,当图片加载完成后,Image.content即为Bitmap对象实例
2、 使用资源类的方式[Embed(source=”sample.png”)]private var myImage:Class的方式引入图片资源。这时 new myImage()获得的即为BitmapAsset类型。
BitmapAsset继承自Bitmap类型,支持其主要的功能方法,可以将该元素赋值给Image.source属性以获得显示
3、 Bitmap.bitmapData属性即存储位图信息的BitmapData对象,BitmapData对象是flex中位图操作的关键,其支持的与二进制数据的转换、像素点操作都为flex的展示提供了强大技术支持。
BitmapData提供一下主要功能:
1、 复制获取整个图像,部分图像
使用draw()方法。
注:源显示对象不对此调用使用其任何已应用的转换。它会被视为存在于库或文件中,没有矩阵转换、没有颜色转换,也没有混合模式。要使用对象自己的 transform 属性来绘制显示对象(如影片剪辑),可以将其 transform
属性对象复制到使用 BitmapData 对象的 Bitmap 对象的 transform
属性。
2、 获取或者改变像素,或者像素组的颜色
使用setPixel(),setPixel32(),getPixel(),getPixel32(),
针对单个像素位进行操作,给一段比较有趣的代码,分解颜色值
var bmd:BitmapData = new BitmapData(80, 40, true, 0xFF44AACC); var pixelValue:uint = bmd.getPixel32(1, 1); var alphaValue:uint = pixelValue >> 24 & 0xFF; var red:uint = pixelValue >> 16 & 0xFF; var green:uint = pixelValue >> 8 & 0xFF; var blue:uint = pixelValue & 0xFF; trace(alphaValue.toString(16)); // ff trace(red.toString(16)); // 44 trace(green.toString(16)); // aa trace(blue.toString(16)); // cc
3、滤镜使用applyFilter(),在使用该方法之前可以通过generateFilterRect()判断滤镜的应用范围。
4、 创建随机的像素(noise或perlin noise)
5、 可以把位图转换成byteArray或者Base64存入数据库,并可以转换回来
使用PNGEncoder,JPGEncoder等,或者直接使用getPixels(),setPixels()方法
关于Encoder使用方法一般如下:
1 /png/jpg类似 2 var encoder:PNGEncoder = new PNGEccoder; 3 var bytes:ByteArray = encoder.encode(bitmapData); 4 5 // 6 获得的bytes如果想再次转换为bitmapData则需要使用loader类来完成解析。从文件或者数据库读取的图片文件也可以使用下面的方式进行转换 7 代码如下: 8 var loader:Loader = new Loader; 9 loader.contentLoaderInfo.addEventListener(Event.Complete, loadCompleterHandler); 10 loader.loadBytes(bytes) 11 12 private function loadCompleterHandler(event:Event):void 13 { 14 var bitdata:BitmapData; 15 var loaderInfo:LoaderInfo = event.target; 16 if(loaderInfo.content is Bitmap){ 17 bitdata = (loaderInfo.content as Bitmap).bitmapData; 18 } 19 else 20 { 21 bitdata = new BitmapData(this.tileSize, this.tileSize); 22 bitdata.draw(loaderInfo.content); 23 } 24 }
getPixels(),setPixels()方法使用,这两个方法获取指定区域的图片位图信息,可以直接完成从byteArray到bitmapData的转换,但是数据层次没有压缩。。。辅助以ByteArray本身的compress()和uncompress()方法可以在存储时节省一定的内存开销
使用getPixels()获取的byteArray信息也可以使用loader.loadBytes()的方法来解析成BitmapData,但是在知道宽高的情况下其实可以直接使用setPixels()直接写入bitmapData中
Code如下:
1 var bitmapdatanew:BitmapData = new BitmapData(300,225); 2 var byteArray:ByteArray = bitmapdata.getPixels( bitmapdata.rect ); 3 4 byteArray.position = 0 5 6 bitmapdatanew.setPixels(new Rectangle(0,0,width,height),byteArray); 7 var bitmap:Bitmap = new Bitmap(bitmapdatanew); 8 _img.source = bitmap; 9 10 注意:bytearray如果在操作过程中进行过读取和写入操作,会影响其posiition属性,该属性会影响后面的读写操作,因此需要多多注意
压缩和解压缩的代码很简单。直接在获取的ByteArray上调用对应方法即可更改自身。Flash默认支持zlib压缩算法