Question

Here’s what I want to do. An image is loaded by default when the app is run. There is a way to load another image the user wants by specifying an url. When the user defined image is loaded, the default image is still in the background and there are some method that would be used to apply some filters on the image as a whole (I mean the resultant image with both the default and the user loaded image blended) and then I want to save the final image as jpg or png.

Now, I am still a beginner at Flex, and getting all confused with all the canvas, image control, bitmapdata etc. Where I want help is what’s the best way to implement what I want? Should I load the default image into an Image with url/embed or should I load it as a BitmapData, how do I load the second user defined image? Whats the best way to blend the two images?

Answer 1

You can leave the default image as embedded one, and retrieve its BitmapData to work with further.

When the user-defined image is loaded, you retrieve its BitmapData, and draw the embedded image over the user-defined one:

/**
 * An embedded image's class (your default image)
 */
[Embed(source="/assets/logo.png")]
public static var Logo:Class;

/**
 * @param bitmapData: The user-defined BitmapData that you want to modify
 * @param matrix: The transofrmation matrix applied to the resulting BitmapData 
 */
public function getCustomBitmapData(bitmapData:BitmapData, matrix:Matrix):BitmapData
{
    // Initialize and drawing the resulting BitmapData's first layer 
    var result:BitmapData = new BitmapData(bitmapData.height, bitmapData.width);
    result.draw(bitmapData, matrix);

    // Load the BitmapData of the embedded Logo image
    var bitmapAsset:BitmapAsset = new Logo();
    var logoBd:BitmapData = bitmapAsset.bitmapData;

    // Draw the logo over the result with an alpha of 0.3
    result.draw(logoBd, matrix, new ColorTransform(1, 1, 1, .3));
    //TODO: You should play with the size of the images, apply filters, etc.

    return result;
}

Then you can save the resulting BitmapData instace to the local file system:

/**
 * Save the BitmapData to a local file
 * @param bitmapData: the data to save
 */
public function saveBitmapData(bitmapData:BitmapData):void
{
    // Initialize the encoder
    var pngEncoder:PNGEncoder = new PNGEncoder();
    // Encode the BitmapData and save its byte array
    var imageBytes:ByteArray = pngEncoder.encode(bitmapData);
    // Create a new FileReference:
    var imageFile:FileReference = new FileReference();
    // Save the file:
    imageFile.save(imageBytes, "myimage.png");
}