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

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

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

 

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

Java代码  

1. private function init():void  
2. {  
3.     var image:Image = new Image();  
4.     image.source = "image/water.jpg";  
5.     addChild(image);  
6.     trace(image.width + ":" + image.height);  
7. }  

 結果顯示 0：0

 

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

Java代码  

1. private function init():void  
2. {  
3.     var image:Image = new Image();  
4.     image.source = "image/water.jpg";  
5.     image.addEventListener(Event.COMPLETE, complete);  
6.     addChild(image);  
7.     trace(image.width + ":" + image.height);  
8. }  
9.       
10. private function complete(event:Event):void {  
11.     var image:Image = event.target as Image;  
12.     trace(image.width + ":" + image.height);  
13. }  

 結果仍然顯示 0：0

 

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

 

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

代碼修改如下：

Java代码  

1. private function init():void  
2. {  
3.     var image:Image = new Image();  
4.     image.source = "image/water.jpg";  
5.     image.addEventListener(Event.RESIZE, complete);  
6.     addChild(image);  
7. }  
8.       
9. private function complete(event:Event):void {  
10.     var image:Image = event.target as Image;  
11.     trace(image.width + ":" + image.height);  
12. }  

 結果顯示 502:750

 

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

 

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

Java代码  

1. private function init():void  
2. {  
3.     var image:Image = new Image();  
4.     image.source = "image/water.jpg";  
5.     image.addEventListener(Event.RESIZE, complete);  
6.     addChild(image);  
7. }  
8.       
9.                           
10. private function complete(event:Event):void {  
11.     var image:Image = event.target as Image;  
12.     trace(image.width + ":" + image.height);  
13.     var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );  
14.     var bmp:Bitmap = new Bitmap( bmpData );  
15.     var image2:Image = new Image();  
16.     image2.source = bmp;  
17.     removeChild(image);  
18.     addChild(image2);  
19. }  

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

 

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

 

Java代码  

1. private function init():void  
2. {  
3.     var image:Image = new Image();  
4.     image.source = "image/water.jpg";  
5.     image.addEventListener(Event.RENDER, render);  
6.     addChild(image);  
7. }  
8.       
9.               
10. private function render(event:Event):void {  
11.     var image:Image = event.target as Image;  
12.     trace("render:" + image.width + ":" + image.height);  
13.     var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );  
14.     var bmp:Bitmap = new Bitmap( bmpData );  
15.     var image2:Image = new Image();  
16.     image2.source = bmp;  
17.     removeChild(image);  
18.     addChild(image2);  
19. }  

 

運行結果：

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 引起。所以修改如下：

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application   
3.     xmlns:mx="http://www.adobe.com/2006/mxml"   
4.     layout="absolute"  
5.         minWidth="350"  
6.     minHeight="136"  
7.         backgroundColor="#ffffff"  
8.         creationComplete="init();"  
9.     >  
10.       
11. <mx:Script>  
12.   
13. <![CDATA[  
14.   
15.     import cn.riahome.filters.DisplayObjectFilter;  
16.     import mx.controls.Image;  
17.   
18.     private function init():void  
19.     {  
20.         var image:Image = new Image();  
21.         image.source = "image/water.jpg";  
22.         image.addEventListener(Event.RESIZE, complete);  
23.         addChild(image);  
24.     }  
25.       
26.               
27.     private function complete(event:Event):void {  
28.         var image:Image = event.target as Image;  
29.         trace(image.width + ":" + image.height);  
30.         image.addEventListener(Event.RENDER, render);  
31.     }  
32.               
33.     private function render(event:Event):void {  
34.         var image:Image = event.target as Image;  
35.         trace("render:" + image.width + ":" + image.height);  
36.         var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );  
37.         var bmp:Bitmap = new Bitmap( bmpData );  
38.         var image2:Image = new Image();  
39.         image2.source = bmp;  
40.         removeChild(image);  
41.         addChild(image2);  
42.     }  
43.   
44. ]]>  
45.   
46. </mx:Script>  
47. </mx:Application>  

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

 

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