Flex Example: Right-Click -> Save Image As

By James Ward | Published: July 9, 2009

One of the things that is available in HTML web pages but usually left out of Flex applications is the ability to save images by right-clicking on them. This is not because it’s not possible with Flex – rather it just requires a little extra coding. So I created a simple Flex example that adds the “Save Image As” right-click menu item. Check out the demo and the source code.

Flex Example - Save Image As

This requires Flash Player 10 which allows users to save files generated at runtime on the client-side. I couldn’t find the ByteArray containing the original image file loaded by Flash Player so instead I had to read the bytes of the image wrapped in a SWF and slice out the image. I’m not 100% sure that this trick will work for all image formats. So give it a try and let me know what happens.

This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • dmendels

    Nice! I wanted this feature for years (it still should be a default option but I am glad it can be done) :)

  • http://loby.pl Grzegorz ?obi?ski

    Thank you James, nice work. I found it helpful.

  • nae2

    > content.loaderInfo.bytes.readBytes(tba, 0, (content.loaderInfo.bytes.length – 17));
    > tba.position = 49;

    Can you explain why you’re substracting 17 from image bytes length and set position to 49 in saveImageAs function?

  • http://www.jamesward.com James Ward

    Hi nae2,

    The contents of content.loaderInfo.bytes isn’t the image but rather the image embedded in a SWF. So I’m pulling the image out of the SWF by chopping off the first 49 bytes and then the last 17 bytes. I have no idea what’s in those bytes or if it’s always 49 and 17. So this needs some testing.

    Alternatively there are a few other ways to do this:
    – Re-fetch the image from the server
    – Maybe find some place in memory where the non-SWF-ified image is and use those bytes
    – Re-encode the image on the client

    I opted to mess with the bytes instead of those options. But maybe someone smarter than me can find a cleaner way to do this.

    -James

  • nae2

    Thanks for quick response. Mostly in my apps I use 1st and 3rd option: fetch it again from server or re-encode the image with PNGEncoder.
    I’ve never saw or used this hack, but i’ts good to know that such thing exists :)

  • Nehul

    I have re-encode the image on client here is the source

    ===========================
    var bmp:Bitmap = Bitmap(this.content);
    var myEncoder:JPGEncoder = new JPGEncoder(75);
    var byte:ByteArray = myEncoder.encode(bmp.bitmapData);
    var fr:FileReference = new FileReference();
    fr.save(byte, “test.jpg”);
    =========================

    You have add this in saveImageAs function in source file SaveableImage.cs in Jamesward packge.

    You need two additional file JPGEncodeer.as and BitString.as for conversion on client side. I can’t attach them on blog.

  • Nehul

    one more thing in your MXML do this

    <custom:SavableImage id="saveImage" name="” >

    in above code filename will be image name coming from server. I have file name set in database column and actual file on server. So it was pretty easy to replace filename to {javadto.imagefilename}

    Now in actionscript

    ===========================
    var bmp:Bitmap = Bitmap(this.content);
    var myEncoder:JPGEncoder = new JPGEncoder(75);
    var byte:ByteArray = myEncoder.encode(bmp.bitmapData);
    var fr:FileReference = new FileReference();
    fr.save(byte, this.name);
    =========================

    save dialog will have same file name as source.

  • Miha Blazin

    I think your sample is great and a thing that constantly gets forgotten when building RIAs with Flex. I do agree the Flex components should provide this functionality (if not by default then at least as a property to set). I do find it weird although, why Acrobat.com Buzzword application ignores the right click context menu features and instead shows a new button everytime you select some text, which makes it really unnaturaly to work with a Rich Text Editor (at least in the traditional way). Is that perhaps because the right click is (or will be) a problem on some platforms that support (or will support) the Adobe Flash Platofrm – like Mobile devices.

  • Pingback: Save Image As… now as a separate tag « The Combined Corner

  • http://www.uniclick.com.pe Adrian Baltazar

    Great work, thanks for the 17 and 49 numbers. How do you find that?

    • http://www.jamesward.com James Ward

      By looking at the content.loaderInfo.bytes and comparing them with the original image’s bytes.

  • Stu

    doesn’t seem to work for pngs at least.

    load the data using URLLoader instead to get the raw image data, then you can convert it to a Bitmap and display that.

  • Faizal

    Hi

    Anyone have an idea how to insert an image into a .doc file in flex.
    I have the snapshot of the image, and I am able to save it as a .png file, but i need to insert this into a .doc file.

    Thanks
    Faizal

    • http://www.jamesward.com James Ward

      You could do this on the server with Java libraries for creating / modifying Word docs.

  • http://www.curiousfind.com Jamie McDaniel

    Thanks! For both GIF and PNG files, it is 45 and 17 instead of 49 and 17. I used a Hex Editor program to compare them.