Bit地图Data

BitmapData

可以使用BitmapData对象加载图片，BitmapData允许使用像素层级来控制位图，其优势如下：

?

可以复制、粘贴整个图像、部分图案，或者是每一个独立的像素。可以鉴别或是改变像素或像素群组的颜色。可以应用滤镜。可以创建随机的像素（noise或perlin noise）等。可以把位图通过encodeBase64方法生成Base64编码字符串存入数据库，使用时通过decodeBase64还原成BitmapData位图对象就可以了。?1、使用BitmapData得到图像数据1.1、使用BitmapData的draw方法得到图像数据：

[Bindable][Embed(source="assets/img/music.png")]private var img:Class;private function init():void{var bd:BitmapData = new BitmapData(img1.width, img1.height);bd.draw(img1);img2.source = new BitmapAsset(bd);}<s:VGroup id="vg" width="200" height="200"><s:Image id="img1" source="{img}" /><s:Image id="img2" /></s:VGroup>

?1.2、在flex3中，也可以用如下方法得到图像数据：

private function init():void{var bd:BitmapData = Bitmap(img1.content).bitmapData;img2.source = new BitmapAsset(bd);}

2、将图片转换成ByteArray和Base64格式数据有两种方法，一种是使用PNGEncoder或JPEGEncoder对象的encode方法将BitmapData转为ByteArray格式数据；另一种是在前一个基础上，使用Base64Encoder对象的encodeBytes将ByteArray转为Base64格式数据。如果要显示出来，还要转成String格式。将BitmapData转成ByteArray格式数据后可以使用compress()将数据压缩，要显示图片时，取出ByteArray后调用uncompress()方法将数据解压缩。

[Bindable][Embed(source="assets/img/music.png")]private var img:Class;protected function btn_clickHandler(event:MouseEvent):void{var bd:BitmapData = new BitmapData(img1.width, img1.height);bd.draw(img1);//也可以使用JPEG格式 new JPEGEncoder(100);var encoder:PNGEncoder = new PNGEncoder();//转换为二进制数据var bytes:ByteArray = encoder.encode(bd);var base64:Base64Encoder = new Base64Encoder();base64.encodeBytes(bytes);//把ByteArray转为Base64编码的字符串var imgStr:String = base64.toString();ta.text = imgStr;}<s:Image id="img1" source="{img}" /><s:Button id="btn" label="Encode" click="btn_clickHandler(event)"/><s:TextArea id="ta" width="300" height="200" />

3、将ByteArray和Base64格式数据转成图片如果是Base64格式的数据，要先使用Base64Decoder对象decode解码后转换成ByteArray格式，然后使用Image组件的load方法显示。mx包里面的Image才有load方法，spark包里面的Image没有load方法。

protected function btn1_clickHandler(event:MouseEvent):void{var base64Dec:Base64Decoder = new Base64Decoder();base64Dec.decode(ta.text);var bytes:ByteArray = base64Dec.toByteArray();img2.load(bytes);}<s:Image id="img1" source="{img}" /><s:Button id="btn" label="Encode" click="btn_clickHandler(event)"/><s:TextArea id="ta" width="300" height="200" /><s:Button id="btn1" label="Show" click="btn1_clickHandler(event)" /><mx:Image id="img2" />

深入理解BitmapData和Bitmap类：BitmapData存储图片的像素数据，可以看做是加载的或动态创建的位图图像中包含的像素的照片快照。Bitmap可以看做是BitmapData对象的包装。多用于Flash中，通常的用法是将BitmapData作为参数实例化Bitmap类(new Bitmap(bitmapData)，实例化得到的这个Bitmap对象就是一幅图片了，将该对象添加到舞台或sprite容器即可。例如：

var myImage:Bitmap = new Bitmap(myBitmapDataObject);addChild(myImage);

Bitmap类不是InteractiveObject类的子类，因此它无法调度鼠标事件。可以使用包含Bitmap对象的容器（例如sprite）来调度鼠标事件。在Flex中，Bitmap是无法直接添加到Flex的舞台或容器中的，所以在得到BitmapData数据后一般会使用Image组件（Bitmap或BitmapAsset作为Image的source）将图片显示出来。加载ByteArray数据时也是用Image的load方法来显示图片。用Bitmap加载ByteArray数据代码如下：

protected function btn1_clickHandler(event:MouseEvent):void{var base64Dec:Base64Decoder = new Base64Decoder();base64Dec.decode(ta.text);var bytes:ByteArray = base64Dec.toByteArray();var load:Loader = new Loader();load.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);load.loadBytes(bytes);}private function onComplete(event:Event):void{var bm:Bitmap = event.target.content as Bitmap;var ui:UIComponent = new UIComponent();ui.addChild(bm);this.addChild(ui);}

4、创建图片快照使用ImageSnapshot类的静态方法captureImage为任何组件创建图片快照，创建快照后可以转为Base64格式数据或ByteArray格式数据。注意，是任何组件，一般用于生成客户端图像的PDF文件。

private var jpegEnc:JPEGEncoder = new JPEGEncoder();private var pngEnc:PNGEncoder = new PNGEncoder();private function capImg(imgEnc:IImageEncoder):void{var snap:ImageSnapshot;snap = ImageSnapshot.captureImage(img1, 0 ,imgEnc);ta.text = ImageSnapshot.encodeImageAsBase64(snap);var bytes:ByteArray = snap.data as ByteArray;img2.load(bytes);}<s:Image id="img1" source="{img}" /><s:Button id="btn" label="capture jpeg" click="capImg(jpegEnc)"/><s:Button id="btn1" label="capture png" click="capImg(pngEnc)" /><s:TextArea id="ta" width="300" height="200" /><mx:Image id="img2" />

5、在图片上取色通过BitmapData对象的getPixel方法返回一个整数，表示BitmapData对象中在特定点(x, y)处的RGB像素值。下面代码实现一个取色器的功能。

protected function img1_mouseMoveHandler(event:MouseEvent):void{var point:int = bd.getPixel(event.localX, event.localY);pl.setStyle("backgroundColor", point);ta.text = "#" + point.toString(16).toUpperCase();}<s:Image id="img1" source="{img}" mouseMove="img1_mouseMoveHandler(event)" /><s:Panel id="pl" width="200" height="200" /> <s:TextArea id="ta" width="300" height="200" />

6、图像复制

[Bindable]private var acImage:ArrayCollection = new ArrayCollection();protected function btn_clickHandler(event:MouseEvent):void{var bd:BitmapData = new BitmapData(img1.width, img1.height);bd.draw(img1);var bm:Bitmap = new Bitmap(bd); acImage.addItem({image:bm});}<mx:Image id="img1" source="{img}" /><mx:Button id="btn" label="copy image" click="btn_clickHandler(event)" /><mx:Repeater id="repeat" dataProvider="{acImage}"><mx:Image source="{repeat.currentItem.image}" /></mx:Repeater>

7、图片的截取图像的截取用途很广泛，例如需要自定义用户头像的功能，因为用户上传的图像大小不一，可以设置一个尺寸固定的矩形，允许用户拖动矩形来截取自己上传的图片。

protected function btn_clickHandler(event:MouseEvent):void{var bd:BitmapData = new BitmapData(img1.width, img1.height);bd.draw(img1);var rect:Rectangle = new Rectangle(0,0,100,100);var bd1:BitmapData = new BitmapData(rect.width, rect.height);var point:Point = new Point(0,0);bd1.copyPixels(bd,rect,point,null,null,false);var bm:Bitmap = new Bitmap(bd1);img2.load(bm);}<s:Image id="img1" source="{img}" /><s:Button id="btn" label="cut image" click="btn_clickHandler(event)" /><mx:Image id="img2" />

使用copyPixels方法复制原始图像的一部分来实现截取，主要设置前三个参数：原始图像数据、复制区域大小、复制的起始点。

查看更多 下一篇