Home > ActionScript, Adobe, Flex > Read an Image from Local using Flex app

Read an Image from Local using Flex app

I was working on one small requirement to read an image from local machine and see how it can display if you change size of canvas on fly. I found an article on this and changed the code a bit to make it work as I wanted it to work. you need to create a Flex project to run it in Flash Player 10 or above otherwise it won’t compile.

I have removed the save option in this code but you can change it back by changing visible property of the button.

Thanks to following article Load Or Modify and save local images with flash player 10

Here is the modified code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” backgroundGradientColors=”[0xFFFFFF,0xFFFFFF]” backgroundColor=”0xFFFFFF”>

import mx.graphics.codec.JPEGEncoder;
import mx.binding.utils.BindingUtils;
import mx.core.UIComponent;

import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.utils.ByteArray;
// From http://techblog.floorplanner.com/2009/05/04/load-modify-and-save-local-images-with-flash-player-10/
private var loadFileRef:FileReference;

private static const FILE_TYPES:Array = [new FileFilter(“Image Files”, “*.jpg;*.jpeg;*.gif;*.png;*.JPG;*.JPEG;*.GIF;*.PNG”)];
private var THUMB_WIDTH:uint = 240;
private var THUMB_HEIGHT:uint = 180;

private function loadFile():void {
imageView.visible = false;
loadFileRef = new FileReference();
loadFileRef.addEventListener(Event.SELECT, onFileSelect);

private function saveFile():void {
var bitmapData:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT);

var encoder:JPEGEncoder = new JPEGEncoder();
var rawBytes:ByteArray = encoder.encode(bitmapData);

var saveFileRef:FileReference = new FileReference();

private function onFileSelect(e:Event):void {
loadFileRef.addEventListener(Event.COMPLETE, onFileLoadComplete);

private function onFileLoadComplete(e:Event):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onDataLoadComplete);

loadFileRef = null;

private function onDataLoadComplete(e:Event):void {
var bitmapData:BitmapData = Bitmap(e.target.content).bitmapData;
imageView.height = Number(heightTxt.text);
imageView.width = Number(widthTxt.text);
var matrix:Matrix = new Matrix();
matrix.scale(Number(widthTxt.text)/bitmapData.width, Number(heightTxt.text)/bitmapData.height);

imageView.graphics.beginBitmapFill(bitmapData, matrix, false);
imageView.graphics.drawRect(0, 0, Number(widthTxt.text), Number(heightTxt.text));
imageView.visible = true;
if (saveButton.visible) saveButton.enabled = true;

<mx:Panel title=”Read image” paddingBottom=”5″ paddingLeft=”5″ paddingRight=”5″ paddingTop=”5″>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:Label text=”Height” width=”42″/><mx:Label text=”Width” width=”50″/>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:TextInput id=”heightTxt” width=”40″ text=”180″ restrict=”0-9″ /><mx:TextInput id=”widthTxt” text=”240″ width=”40″ restrict=”0-9″ />
<mx:Button label=”Load image” click=”loadFile()”/>
<mx:Button label=”Save image” visible=”false” click=”saveFile()” id=”saveButton” enabled=”false”/>
<mx:Canvas id=”imageView” width=”240″ height=”180″ visible=”false” borderThickness=”1″ borderColor=”#CCCCCC” borderStyle=”solid”/>

Categories: ActionScript, Adobe, Flex
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: