BitmapData 博客分类： Flex

可以使用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方法复制原始图像的一部分来实现截取，主要设置前三个参数：原始图像数据、复制区域大小、复制的起始点。