actionscript-3flex3maskmaskingbitmask

How to mask image with another image in ActionScript 3.0


my issue is this, my users import an image with FileReference and I need to mask it and then send it to server.

My problem is this: I'm be able do keep the filereference event and transfer the image data into my canvas. I'm be able to send to server the result of masking.

But I'm NOT be able to mask the image that my users have load in my canvas.


Solution

  • You just need to add loaded bitmap to maskable container (e.g. Sprite). For exmaple: 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);
        }
    }}