Some questions regarding Image manipulation in Flex

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 d开发者_如何转开发efault 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?

---

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");
}