如何用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）。希望这可以帮助。