Basic utility that allows the ability to open an image and re-size that image to a specific width or you can use height. Then when requesting the image for an mx:image component it will always be in a png because it takes an internal snapshot. This helps for not saving transparency, reduce file size, protecting against image code embedding, and also allows saving consistent byte array to db if so wanted.

package com.justinimhoff.library.managers
{
    import flash.display.Loader;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.net.FileFilter;
    import flash.net.FileReference;
    import flash.utils.ByteArray;
 
    import mx.graphics.ImageSnapshot;
    import mx.graphics.codec.PNGEncoder;
 
    /**
     * Dispatched when the user has picked and image and it is has processed and resized
     */
    [Event(name = "imageReady", type = "flash.events.Event")]
    /**
     * Class that can upload an image and directly sets information and scale to
     * resize an image. When returning an image returns a snap shot where the data
     * can be used to set an iimage source and file information can be used for the
     * server
     */
    public class ImageUploader extends EventDispatcher
    {
 
        public static const IMAGE_READY_EVENT:String = 'imageReady';
 
        /**
         * @private
         */
        private var _image:SmoothImage;
 
        /**
         * @private
         */
        private var _resizeHeight:Number = 60;
 
        /**
         * @private
         */
        private var fileRef:FileReference;
 
        /**
         * @private
         */
        private var fileTypes:Array;
 
        /**
         * Call contructor
         * @param image Takes a SmoothImage component that is best used when resizing
         */
        public function ImageUploader(image:SmoothImage):void
        {
            super();
            onConstructor(image);
        }
 
        /**
         * Displays a pop for the user to select the file they want to upload
         */
        public function browse():void
        {
            fileRef.browse(fileTypes);
        }
 
        /**
         *
         */
        public function get resizeHeight():Number
        {
            return _resizeHeight;
        }
 
        /**
         * Sets the width used to calculate the height and width of the thumbnail from
         * the original
         * @private
         */
        public function set resizeHeight(value:Number):void
        {
            _resizeHeight = value;
        }
 
        /**
         * Returns a snapshot to access data and file type for the encoder
         * that was used - default to png
         * @return
         *
         */
        public function get image():ByteArray
        {
            var pngEnco:PNGEncoder = new PNGEncoder();
            var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(_image, 0, pngEnco);
            return imageSnapshot.data;
        }
 
		/**
		 * 
		 * 
		 */		
        public function removeImage():void
        {
            _image.source = null;
            _image.width = 0;
            _image.height = 0;
        }
 
        /**
         * Initialize and set listners and define available types allowed.
         * Only support jpg and png images
         */
        protected function onConstructor(image:SmoothImage):void
        {
            //Setup file reference
            fileRef = new FileReference();
            fileRef.addEventListener(Event.SELECT, onFileSelect);
            fileRef.addEventListener(Event.COMPLETE, onFileLoadComplete);
 
            //create filter
            fileTypes = [ new FileFilter("Images", "*.jpeg;*.jpg;*.png") ];
 
            //Set image
            _image = image;
        }
 
        /**
         * Load the image for local manipulation
         * @param evt
         */
        protected function onFileSelect(evt:Event):void
        {
            fileRef.load();
        }
 
        /**
         * Load the full image in order to access the height and width of
         * the original image
         * @param evt
         */
        protected function onFileLoadComplete(evt:Event):void
        {
            //Get size
            var ldr:Loader = new Loader();
            ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImageComplete);
            ldr.loadBytes(fileRef.data);
        }
 
        /**
         * Resize the image directly to create the thumbnail. Uses width only and
         * calculates the height based on the ratio. Sets the source on the image and sets
         * the new width and height
         * @param evt
         *
         */
        protected function onLoadImageComplete(evt:Event):void
        {
            var h:int = resizeHeight;
            var ratio:Number = h / evt.currentTarget.height;
            var w:int = evt.currentTarget.width * ratio;
            _image.height = h;
            _image.width = w;
            _image.source = fileRef.data;
            dispatchEvent(new Event(IMAGE_READY_EVENT, true));
        }
    }
}

The smooth image is used for re-sized images and just helps when taking a snapshot.

package com.justinimhoff.library.managers
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.events.Event;
 
    import mx.controls.Image;
    import mx.core.mx_internal;
 
    use namespace mx_internal;
 
    /**
     * Image component used for resizing. Available in spark, but not in mx.
     * TODO - use spark image
     */
    public class SmoothImage extends Image
    {
 
		public function SmoothImage():void{
			super();
			onConstructor();
		}
 
		protected function onConstructor():void{
			cacheAsBitmap = true;
		}
 
		override public function set source(value:Object):void{
			if(value != source){
				super.source = value;
			}
		}
 
        /**
         * Turn on smoothing as a default
         * @private
         */
        mx_internal override function contentLoaderInfo_completeEventHandler(event:Event):void
        {
            var smoothLoader:Loader = event.target.loader as Loader;
            var smoothImage:Bitmap = smoothLoader.content as Bitmap;
            if (smoothImage)
            {
                smoothImage.smoothing = true;
            }
            super.contentLoaderInfo_completeEventHandler(event);
        }
    }

Leave a reply