Flash AS3 blur or liquify part of an image with mouse

Question

Hi,

I am very beginner in flash. I want to load an image, show a cursor over the image and on mousedown I want to blur that actual part of the image. (e.g you can blur your face on the image and then save the new image).

I can delete parts of the image with white line, but I would like to blur it instead

    // LIVE JPEG ENCODER 0.3
// from bytearray.org
import asfiles.encoding.JPEGEncoder;
import flash.external.ExternalInterface;

ExternalInterface.addCallback("flash_saveImage", inflash_saveImage);

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleComplete);
loader.load(new URLRequest(loaderInfo.parameters._filename));
//loader.load(new URLRequest("b.jpg"));

var container_mc:MovieClip = new MovieClip;//create movieclip

function handleComplete(e:Event):void 
    {
    addChild(container_mc);
    var bitmapData:BitmapData = Bitmap(e.target.content).bitmapData;
    var matrix:Matrix = new Matrix();
    container_mc.graphics.clear();
    container_mc.graphics.beginBitmapFill(bitmapData, matrix, false);
    //container_mc.graphics.beginFill(0xFFFFFF,0);
    container_mc.graphics.drawRect(0, 0, bitmapData.width, bitmapData.height);
    container_mc.graphics.endFill();
    swapChildren(container_mc, pencil);
    container_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
    container_mc.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
    container_mc.addEventListener(MouseEvent.MOUSE_MOVE, makeLine);     
    }

    stage.addEventListener(MouseEvent.MOUSE_MOVE, moveCursor);
    Mouse.hide();

function moveCursor(event:MouseEvent):void
{
    pencil.x = event.stageX;
    pencil.y = event.stageY;
}

function startDrawing(event:MouseEvent):void{   
    container_mc.graphics.lineStyle(20, 0xFFFFFF, 1);
    container_mc.graphics.moveTo(mouseX, mouseY);
    container_mc.addEventListener(MouseEvent.MOUSE_MOVE, makeLine);
}

function stopDrawing(event:MouseEvent):void{
    container_mc.removeEventListener(MouseEvent.MOUSE_MOVE, makeLine);
}

function makeLine(event:MouseEvent):void{
    container_mc.graphics.lineTo(mouseX, mouseY);
}


function inflash_saveImage ( ):void 
    {
    var myURLLoader:URLLoader = new URLLoader();
    var myBitmapSource:BitmapData = new BitmapData ( container_mc.width, container_mc.height );

    // render the player as a bitmapdata
    myBitmapSource.draw ( container_mc );

    // create the encoder with the appropriate quality
    var myEncoder:JPEGEncoder = new JPEGEncoder( 80 );

    // generate a JPG binary stream to have a preview
    var myCapStream:ByteArray = myEncoder.encode ( myBitmapSource );

    var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");

    var myRequest:URLRequest = new URLRequest ( "save.php" );

    myRequest.requestHeaders.push (header);

    myRequest.method = URLRequestMethod.POST;

    myRequest.data = myCapStream;
    myURLLoader.load ( myRequest );

}

Thanks, hamlet

Answer 1

I can think of one solution for your problem. Make a copy of the original image an blur it all. then use the mouse to position a mask that copy the pixels from the blured image and add this on top of the original image. In the end you just have to save the original image plus the blured parts

-> transparent container (this is where you will draw the pixels)

-> original image

-> blurred image (there is no need to add this to display list, used as source to paint the blurred pixels)

I haven't try this with blur, but did a similar thing to apply a filter to a part of a image, and as far as I remember this was the setup.