Peter Moelgaard's Blog

James Ward created a clever way of adding a “Save Image As…” feature to an image in Flex.

However clever, in my case I really wanted to avoid having to subclass the Image class specifically, so I created an MXML tag which would take the Image instance as an argument instead.

The source code looks like this…

package org.hello.saveimageas
{
	import flash.events.ContextMenuEvent;
	import flash.net.FileReference;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import flash.utils.ByteArray;

	import mx.controls.Image;
	import mx.core.IMXMLObject;

	public class SaveImageAs implements IMXMLObject
	{
		private var _target:Image;
		private var _label:String = "Save Image As...";

		public function SaveImageAs()
		{
			super();
		}

		public function initialized(document:Object, id:String):void
		{
			// empty for now
		}

		protected function saveImageAs( event:ContextMenuEvent ) : void
		{
			var tba:ByteArray = new ByteArray();
			this.target.content.loaderInfo.bytes.readBytes(tba, 0, ( this.target.content.loaderInfo.bytes.length - 17 ) );
			tba.position = 49;

			var ba:ByteArray = new ByteArray();
			while (tba.bytesAvailable)
			{
				ba.writeByte(tba.readUnsignedByte());
			}

			var fr:FileReference = new FileReference();
			fr.save( ba, this.target.source.toString() );
		}

		[Bindable]
		public function get target() : Image
		{
			return this._target;
		}

		public function set target( value:Image ) : void
		{
			this._target = value;

			if( this.target != null )
			{
				var targetContextMenu:ContextMenu = this.target.contextMenu != null ? this.target.contextMenu : new ContextMenu();
				targetContextMenu.hideBuiltInItems();

				var item:ContextMenuItem = new ContextMenuItem( this.label );
				targetContextMenu.customItems.push(item);

				item.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, saveImageAs );

				this.target.contextMenu = targetContextMenu;
			}
		}

		[Bindable]
		public function get label() : String
		{
			return this._label;
		}

		public function set label( value:String ) : void
		{
			this._label = value;
		}
	}
}

A basic usage of it could look something like this…

 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:saveimageas="org.hello.saveimageas.*">

	<mx:Image id="image" source="http://www.motorscooterguide.net/Pictures/cy50jog_black.jpg" />

	<fx:Declarations>
		<saveimageas:SaveImageAs target="{ this.image }" />
	</fx:Declarations>

</s:Application>

Be sure to check out the original implementation by James Ward… it might suite your needs better…
http://www.jamesward.com/blog/2009/07/09/flex-example-right-click-save-image-as/

Thomas Burleson has already cornered this approach – as “Flex Behavior Injection”… check it out…
http://www.gridlinked.info/flex-behavior-injection/

The above modification to James Wards’ original contribution has been added to the “unsponsored” framework from where you can obtain it via SVN…
http://code.google.com/p/unsponsored/