Saving an Image [and its process behind].

Hello,
during the last couple of days i've been trying to implement the 'download' option to my prototype app.

I've included a jpegEncoder plug-in in my root folder, so i could transform my bitmaps to ".jpg".

When applying a filter to a captured image, this is still a bitmap. I came up with some issues and had to do a research in order to fix issues.

The jpegEncoder doesn't take a bitmap for encoding, it takes a bitmapData object instead. My first issue was to encode my image and its filter. I discovered i was only encoding the image itself because the encoding was taking my bitmapData object (in this case the image from the video). So in order to add the filter to my image i had  to change my code slightly and use a property that i've never used before ".applyFilter".

So from using this:
                             bitMap.filters = [filter];
I've modified it to this:
                             bitMapData.applyFilter(bitMapData ,rect, point, filter);

This does exactly the same thing, it applies a filter, the only difference is that applies it to a bitmapData object and takes another 2 arguments in case you decide to move the filter from its position on the image.

Once the image (bitmapData) has got its filter, now can be encoded. Encoding a bitmap is pretty straight forward: it can be done in 2 lines of code!


                            jpegEnc =  new JPGEncoder(85);
                            jpegF = jpegEnc.encode(img);
Now that the image has been encoded and has its filter, there's one thing missing: the frame.

In this case my frame is a MovieClip. Then again i have to convert this MovieClip into bitmapData.
Once the frame has been converted there's no way to include it or concatenate it in the encoding process.

To make this happen and to add these three elements in one i had to make another function to merge them.

The copy pixels property copies a rectangular area of an image to a rectangular area at the destination point of the bitmapData object. So let's say i'm copying the bitMapData var (my image) to the Frame, this means i'm copying it and placing it on top of the frame using this point (28, 26).

The three elements have been merged and encoded, now my next step would be to download or save the picture on my computer.

This was done by adding fileReference.save() to my class.

fileReference.save() takes two arguments, the data & the file's name (concatenating the file extension, in this case .jpg). This procedure works just fine when clicking on the 'download' button.

The way it works is quite familiar, you will get a box where you can assign a name for your file, choose the location where you want to save your picture and click "save" or "cancel".  By clicking on save,  you get the picture on your location (i.e. on your desktop).

                   myFileReference.save(myEncodedPhoto,  fileName + 'extension .jpg');

My project has the ability to save a picture now!.

here's the result!