监听Image 动态加载的完成，加入馬賽克效果

需求為：動態加載圖片 Image后，使用 馬賽克 特效。

問題：new Image 后，馬上取不到圖片數據，沒辦法做馬賽克處理，需要等待圖片加載完成.

 

發現直接使用如下代碼的話，讀取不到圖片數據.

private function init():void
{
	var image:Image = new Image();
	image.source = "image/water.jpg";
	addChild(image);
	trace(image.width + ":" + image.height);
}

 結果顯示 0：0

 

發現需要等待圖片加載完成后，才可以取得到數據，於是修改為

private function init():void
{
	var image:Image = new Image();
	image.source = "image/water.jpg";
	image.addEventListener(Event.COMPLETE, complete);
	addChild(image);
	trace(image.width + ":" + image.height);
}
	
private function complete(event:Event):void {
	var image:Image = event.target as Image;
	trace(image.width + ":" + image.height);
}

 結果仍然顯示 0：0

 

搞不明白那個Event.COMPLETE，到底幹嘛去了。

 

於是花費我大量時間，經過一番徹底研究（google了半小時），終於發現，不能監聽Event.COMPLETE，正確的做法應該是監聽 Event.RESIZE

代碼修改如下：

private function init():void
{
	var image:Image = new Image();
	image.source = "image/water.jpg";
	image.addEventListener(Event.RESIZE, complete);
	addChild(image);
}
	
private function complete(event:Event):void {
	var image:Image = event.target as Image;
	trace(image.width + ":" + image.height);
}

 結果顯示 502:750

 

讀取到大小了。圖片應該是加載完了。

 

接下來需要做的是，將圖片加上馬賽克效果：

private function init():void
{
	var image:Image = new Image();
	image.source = "image/water.jpg";
	image.addEventListener(Event.RESIZE, complete);
	addChild(image);
}
	
						
private function complete(event:Event):void {
	var image:Image = event.target as Image;
	trace(image.width + ":" + image.height);
	var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
	var bmp:Bitmap = new Bitmap( bmpData );
	var image2:Image = new Image();
	image2.source = bmp;
	removeChild(image);
	addChild(image2);
}

 運行結果 502：750， 圖片的大小是可以讀到了，但是加入馬賽克效果的圖片沒有顯示，或顯示為空。

 

猜測可能是圖片的 內容數據 還沒載入。於是試著測試監聽別的事件看看，后來發現使用Event.RENDER，可以使圖片顯示，但是圖片大小值，仍然為 0：0，而且在加入馬賽克效果時，有異常，查看后發現異常是 圖片大小為 0：0 引起的。

 

private function init():void
{
	var image:Image = new Image();
	image.source = "image/water.jpg";
	image.addEventListener(Event.RENDER, render);
	addChild(image);
}
	
			
private function render(event:Event):void {
	var image:Image = event.target as Image;
	trace("render:" + image.width + ":" + image.height);
	var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
	var bmp:Bitmap = new Bitmap( bmpData );
	var image2:Image = new Image();
	image2.source = bmp;
	removeChild(image);
	addChild(image2);
}

 

運行結果：

render:0:0
ArgumentError: Error #2015: 无效的 BitmapData。
 at flash.display::BitmapData()
 at cn.riahome.filters::DisplayObjectFilter$/mosaicFilter2()[E:\pengranxiang\flex_workspace\Demo\src\cn\riahome\filters\DisplayObjectFilter.as:212]
 at Demo/render()[E:\pengranxiang\flex_workspace\Demo\src\Demo.mxml:47]

 

停掉程序后，發現頁面上有加上馬賽克效果的圖片出現。不停掉程序的話，頁面一直會卡住，看不到圖片。

檢查后發現異常由於 圖片的大小 0：0 引起。所以修改如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
    	minWidth="350"
   	minHeight="136"
    	backgroundColor="#ffffff"
    	creationComplete="init();"
	>
	
<mx:Script>

<![CDATA[

	import cn.riahome.filters.DisplayObjectFilter;
	import mx.controls.Image;

	private function init():void
	{
		var image:Image = new Image();
		image.source = "image/water.jpg";
		image.addEventListener(Event.RESIZE, complete);
		addChild(image);
	}
	
			
	private function complete(event:Event):void {
		var image:Image = event.target as Image;
		trace(image.width + ":" + image.height);
		image.addEventListener(Event.RENDER, render);
	}
			
	private function render(event:Event):void {
		var image:Image = event.target as Image;
		trace("render:" + image.width + ":" + image.height);
		var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
		var bmp:Bitmap = new Bitmap( bmpData );
		var image2:Image = new Image();
		image2.source = bmp;
		removeChild(image);
		addChild(image2);
	}

]]>

</mx:Script>
</mx:Application>

 改為以上代碼后，程序運行正常，馬賽克效果圖片顯示正常。

 

順便發一下馬賽克處理用的圖片處理的包， 很好用， 有用法實例和源代碼。

這裡是源碼包

這裡是用法教程