Adobe Air: Building an app for image crop and resize

Question

I am new to building Adobe Air application. Could not find a tutorial which can teach me

1. How to upload an image in the application?
2. How to crop that image?
3. Or How to resize image?
4. Download edited image to the desktop.

Please help me with this.
When I google it, google shows all the applications which does it. It does not give me a single tutorial in the search result.

I am aware of the basic flex concepts and using Flex Builder 4.6 IDE.

Answer 1

This question is rather broad, so I'll just give the basic steps you will need to do.

1. Use FileReference.browse() (or File.browse(), which is a subclass of FileReference) to let the user pick a file using the native ui. Listen to the Event.COMPLETE. In the completeHandler you then have access to the file's url or nativePath. On mobile systems this may have restrictions regarding the folders you are able to navigate.

2. Load the image using either Loader or , if you use an spark.Image or spark.BitmapImage component to display the image, simply pass the url from the fileReference to the source property of the component. In any case, you will have to listen for the COMPLETE event again, so you know when the image has loaded.

3. To crop or resize the image, you use Bitmap and BitmapData. If you are using Loader, you can obtain a copy of your source's bitmapData by typeCasting Loader.content as Bitmap (var bmp:BitmapData = (Loader.content as Bitmap).bitmapData;). BitmapImage and Image both have a bitmapData property you can use. For cropping: a) define your source rectangle b) create a new BitmapData using width and height from rect and c) use the bitmapData.draw() method on your source bitmap and pass in the target bitmapData and the rect. For resizing: basically the same, just define a transform Matrix instead a Rectangle and apply it to the draw function. Don't simply scale down the Loader/Image/BitmapImage and try to copy it, as this will not affect it's containing bitmap. You can also combine a matrix and a rect and do everything in one step.

4. Encode the bitmapData to jpg or png using it's encode() method. The resulting ByteArray is your new file contents. This step can be a tad slow, especially on mobile devices. There are several solutions to speed that up a bit. Try the search with "JPEGEncoder [air]"

5. Save the file. There are again many options here. The most simple would be using File.browseForSave(). This way the user can pick the name and path using the native ui for file dialogs. If you prefer to do this in actionscript, you can also use FileStream.writeBytes().

This is a very rough overview how to achieve your goal, far from beeing explicit to the detail nor the only way to do it. But it should get you in the right direction. Hope this helps.