Displaying an image saved as a Base64 encoded string in Flex 3

In a previous example, “Using the ImageSnapshot class to capture images as JPEGs or PNGs in Flex 3”, we saw how you could convert an item on the display list into a base64 encoded string.

The following example shows how you can take a base64 encoded string and load it into a Flex Image control using the decode() and toByteArray() methods in the mx.utils.Base64Decoder class, and the load() method in the mx.controls.Image class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/17/displaying-an-image-saved-as-a-base64-encoded-string-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.Base64Decoder;

            private var base64Dec:Base64Decoder;

            private function init():void {
                var byteArr:ByteArray;

                base64Dec = new Base64Decoder();
                base64Dec.decode(logo);

                byteArr = base64Dec.toByteArray();

                img.load(byteArr);
            }
        ]]>
    </mx:Script>

    <mx:String id="logo" source="logo.txt" />

    <mx:Form width="100%" height="100%">
        <mx:FormItem label="image:">
            <mx:Image id="img" />
        </mx:FormItem>
        <mx:FormItem label="source:"
                width="100%"
                height="100%">
            <mx:TextArea id="textArea"
                    text="{logo}"
                    editable="false"
                    width="100%"
                    height="100%" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

/src/logo.txt

/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2MBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//AABEIADIAMgMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AJ9Z1G8i1e5SO6mRFbAVXIA4oAqDVL//AJ/J/wDvs0AI2qX/APz+z/8Afw0ARNq2of8AP7cf9/DQBE2sakOl/cf9/DQBC2s6mP8AmIXP/f00Aen27FreMkkkqCfyoA4HXjjW7v8A3/6CgBdK0q41QS/Z3jXy8Z3kjrn0B9KALsnhS/WNmMtudoJwGbP/AKDQBzrGgCFzQBA5oA9etv8Aj1h/3B/KgDz7xA2Ndu/9/wDoKANrwSS0V+BycJ/7NQBkTaNq0MLyyW7qiKWY7xwB170ATW+j219oEt5aySm6hB3xkgjjk44z06UAQXuk29joEN3cySi7n5jiBAAHXJ4z0/mKAOdc0wPYbX/j1h/3F/lSA858RtjX7z/f/oKANvwM37nUSOoCfyagDAl1vUZY2jkvJWRgQyluCD2oA2PCG+zgvdTncpaIm0j++Rzx9On40AJ43geZbXU4XMlq6BR6LnkH8f6UAca7UwPZbX/j1h/3F/lSA8z8TNjxDej/AG/6CmBBYaveaasq2k3liXAf5Qc4zjqPc0AUi9AFqXV7yTTlsGmH2VMEIFUe/JAyaAE/tu/XTTp/ng2pBGxkU989SM9aQGU70Ae12v8Ax6w/7i/yoA8w8UK//CR3uEYjf2HsKYGXtk/55v8AkaAArJ/zzb8jQAwrJ/zzf8jQBGySn/lm/wD3yaQDfJlP/LN/++TQB7Zag/ZYeP4F/lQA9o0LElFJ9xQAvlR/880/75FAB5Uf/PNP++RQAeVH/wA80/75FAB5Uf8AzzT/AL5FMA8qP/nmn/fIoAcBxSA//9k=

View source is enabled in the following example.

23 thoughts on “Displaying an image saved as a Base64 encoded string in Flex 3

  1. thanks! it works with flex 3!! it took me hours to find out this solution
    this post should put into the flex api document

  2. base64Eec = new Base64Eecoder();

    There shows one more error 4 me like thaat:call to a possibly undefined method Base64Eecoder

    my code is…..

    public function postData():void {
    var request:HTTPService = new HTTPService();
    var base64Eec:Base64Encoder;
    request.url = "http://twitter.com/statuses/update.xml";
    request.method = "POST";
    request.addEventListener(ResultEvent.RESULT,
    handleComplete);
    var username:String = "username";
    var password:String = "password";
     base64Eec = new Base64Eecoder();
     base64Eec.encode(username + ":" + password);
    var encodedCredentials:String = base64Eec.toString();
    var headerArray = new Array(
    new URLRequestHeader("Authentication",
    "Basic " + encodedCredentials));
    

    can u help me please…….

  3. anoop,

    Are you using Flex 3? This class was added in Flex 3, and isn’t available in Flex 2 projects.
    Also, make sure you’ve imported the Base64Encoder/Base64Decoder class as well:

    import mx.utils.Base64Decoder;
    import mx.utils.Base64Encoder;
    

    Peter

  4. First things first – superb blog – would be lost without it. Thank you.

    I’m working on some code at the moment and need to display a Base64 String as an image. Used the example above and it worked first time. Thank you.

    *BUT* (isn’t there always a but…)

    What to do when the String is coming from a database and sometimes contains invalid data.

    I thought it would be a simple matter to trap the error and display an alternative image.

    Nothing seems to work.

    I’ve tried try/catch blocks. I’ve tried using ioError event on the image component.

    I’m going out of my mind – Could you suggest a way to trap invalid data. If I can trap the error I can deal with it. Nothing seems to work.

    Kind Regards

    Once again – the blog is superb :)

    Rich

  5. Thanks for the info on this! It saved my butt.

    I had been trying to figure out how to create Power Point presentations from Flex and ColdFusion, and this was the trick.

    By encoding the images, I am able to embed the images into a .MHT file (which is basically xml), and Power Point can read this file and display the images, just like a ppt file. I even named the file with a .ppt extension so Power Point is the default app to open it, and its all working great.

    cheers!
    Dustin

  6. thanks this worked. However I am receiving an image as a byte array in a string not base64hex in a string. Data in string looks like this…34,645,234,653,122,12,32,43,543,…

    Ho do i convert this string of numbers to a bytearray and in turn into an image

    By the way this is a magnificent site, well done.

    thanks,
    Ken

  7. ken larkin,

    I don’t know if this would work, but you could try converting the list of numbers into an array using the split() method, then loop over the array of numbers and add them to a ByteArray using the writeInt() method. Something like this:

    private function stringToByteArray(value:String):ByteArray {
    	var arr:Array = value.split(",");
    	var idx:uint;
    	var len:uint = arr.length;
    	var byteArr:ByteArray = new ByteArray();
    	for (idx=0; idx<len; idx++) {
    		byteArr.writeInt(arr[idx]);
    	}
    	return byteArr;
    }
    

    But I’m sure there may be a few missing pieces. You could try asking on the FlexCoders mailing list, I’m sure somebody there has attemped what you’re trying to do.

    Peter

  8. Hi There,

    Very Nice article.just wanted a little help.

    I have an array containing the bytearrays of the images .How can i display the images in an horizontal scroll bar.

    Can you please help me in this???

  9. Very nice. I was looking for an example of how to stream image data from a PHP script to the Image component. This works very nice. Thanks a heap!

  10. I need put images in a datagridColumn from database whit a xml file:
    i use the class Bade64Decoder…

    my idea:

     

    any Idea?

  11. I need put images in a datagridColumn from database whit a xml file:

    /9j/4RWrRXh..... .....AAAAAAAAAAAAA==

    i use the class Bade64Decoder…

    my idea:

  12. I need put images in a datagridColumn from database whit a xml file:

     
     
    	/9j/4RWrRXh..... .....AAAAAAAAAAAAA==

    i use the class Bade64Decoder…

    my idea:

     
  13. Hello,

    my image is saved in a db table in a field of type image :

    the data (jpeg format) looks like
    0xFFD8FFE000104A4649460001010100C000C00000FFDB004300080606070………..

    i am retrieving the data as a string, how cn i display this image?

    thnks

  14. Hi peter , i had used the tilelist so i need the base64 string decoding in image’s source tag..

    thanks in advance
    Ajith

  15. Man! You’ve just turned on the light bulb over my brain after 2 days struggling with PHP GD library and a bunch of Flex display objects… Thanks.

Comments are closed.