如何用ActionScript 3.0中的另一個圖像遮罩圖像

Question

我的問題是這樣的，我的用戶用 FileReference導入圖像，我需要將其掩蓋並將其發送到服務器。

我的問題是這樣的：我能夠保持filereference事件，並且 將圖像數據傳輸到我的畫布中。我可以發送到服務器 掩蔽的結果。

但我無法掩蓋我的用戶在我的畫布上加載的圖像 。

有什麼幫助/例子??

感謝 尼古拉

Answer 1

你只需要添加加載位圖可屏蔽容器（如雪碧）。例如： Test.as

package { 
import flash.display.Graphics; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.net.FileFilter; 
import flash.net.FileReference; 

public class Test extends Sprite { 

    private var _fileReference:FileReference; 
    private var _fileFilter:FileFilter; 
    private var _loader:Loader; 
    private var _imageContainer:Sprite; 
    private var _mask:Sprite; 
    private var _canvas:Sprite; 

    public function Test() { 
     addEventListener(Event.ADDED_TO_STAGE, addedToStageListener, false, 0, true); 
    } 

    private function addedToStageListener(event:Event):void { 
     removeEventListener(Event.ADDED_TO_STAGE, addedToStageListener); 

     _fileReference = new FileReference(); 
     _fileReference.addEventListener(Event.SELECT, fileSelectedListener, false, 0, true); 
     _fileReference.addEventListener(Event.COMPLETE, fileLoadCompleteListener, false, 0, true); 

     _fileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png"); 

     _loader = new Loader(); 
     _canvas = new Sprite(); 

     _mask = new Sprite(); 
     var maskGraphics:Graphics = _mask.graphics; 
     maskGraphics.beginFill(0xFFFFFF); 
     maskGraphics.drawCircle(50, 50, 50); 
     maskGraphics.endFill(); 

     _imageContainer = new Sprite(); 
     _imageContainer.mask = _mask; 

     _canvas.addChild(_imageContainer); 
     _canvas.addChild(_mask); 

     addChild(_canvas); 

     stage.addEventListener(MouseEvent.CLICK, mouseClickListener, false ,0, true); 
    } 

    private function mouseClickListener(event:Event):void { 
     _fileReference.browse([_fileFilter]); 
    } 

    private function fileSelectedListener(event:Event):void { 
     _fileReference.load(); 
    } 

    private function fileLoadCompleteListener(event:Event):void { 
     _loader.loadBytes(event.target.data); 

     while(_imageContainer.numChildren) { 
      _imageContainer.removeChildAt(0); 
     } 
     _imageContainer.addChild(_loader); 
    } 
}} 

Answer 2

這改變了情況，但並不顯着。查看修改後的解決方案：

package { 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
import flash.net.FileFilter; 
import flash.net.FileReference; 

public class Test extends Sprite { 

    private var _fileReference:FileReference; 
    private var _fileFilter:FileFilter; 
    private var _imageLoader:Loader; 
    private var _maskLoader:Loader; 
    private var _canvas:Sprite; 

    private var _imageLoaded:Boolean = false; 

    public function Test() { 
     addEventListener(Event.ADDED_TO_STAGE, addedToStageListener, false, 0, true); 
    } 

    private function addedToStageListener(event:Event):void { 
     removeEventListener(Event.ADDED_TO_STAGE, addedToStageListener); 

     _fileReference = new FileReference(); 
     _fileReference.addEventListener(Event.SELECT, fileSelectedListener, false, 0, true); 
     _fileReference.addEventListener(Event.COMPLETE, fileLoadCompleteListener, false, 0, true); 

     _fileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png"); 

     _imageLoader = new Loader(); 
     _imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadCompleteListener, false, 0, true); 
     _maskLoader = new Loader(); 
     _maskLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, maskLoadCompleteListener, false, 0, true); 

     _canvas = new Sprite(); 
     addChild(_canvas); 

     stage.addEventListener(MouseEvent.CLICK, mouseClickListener, false ,0, true); 
    } 

    private function mouseClickListener(event:Event):void { 
     _fileReference.browse([_fileFilter]); 
    } 

    private function fileSelectedListener(event:Event):void { 
     _fileReference.load(); 
    } 

    private function fileLoadCompleteListener(event:Event):void { 
     if (!_imageLoaded) { 
      _imageLoader.loadBytes(event.target.data); 
     } else { 
      _maskLoader.loadBytes(event.target.data); 
     } 
    } 

    private function imageLoadCompleteListener(event:Event):void { 
     _imageLoaded = true; 
    } 

    private function maskLoadCompleteListener(event:Event):void { 
     var imageBitmap:Bitmap = _imageLoader.content as Bitmap; 
     var maskBitmap:Bitmap = _maskLoader.content as Bitmap; 

     if (imageBitmap && maskBitmap) { 
      var imageBitmapData:BitmapData = imageBitmap.bitmapData; 
      var maskBitmapData:BitmapData = maskBitmap.bitmapData; 

      var boundRectange:Rectangle = new Rectangle(0, 0, maskBitmap.width, maskBitmap.height); 
      var destinationPoint:Point = new Point(0, 0); 

      var finalBitmapData:BitmapData = new BitmapData(maskBitmap.width, maskBitmap.height); 
      finalBitmapData.copyPixels(imageBitmapData, boundRectange, destinationPoint, maskBitmapData, destinationPoint); 
      var finalBitmap:Bitmap = new Bitmap(finalBitmapData); 

      while(_canvas.numChildren) { 
       _canvas.removeChildAt(0); 
      } 
      _canvas.addChild(finalBitmap); 
     } 
    } 
}} 

首先點擊舞臺可讓您選擇蒙版圖像。第二次點擊可讓您選擇包含屏蔽信息的圖像（例如帶有透明度的png文件，like your image）。希望這可以幫助。