需求為:動態加載圖片 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>
改為以上代碼后,程序運行正常,馬賽克效果圖片顯示正常。
順便發一下馬賽克處理用的圖片處理的包, 很好用, 有用法實例和源代碼。