Does Flex support the data uri scheme?

Question

I wish to pass many small PNG files as base64 encoded URIs within an XML response, but there seems to be no way to make flex present these images. I was thinking of the data uri scheme, but it appears not to be supported.

Proposed solutions

1. Use Loader.LoadBytes

Tried it and it doesn't seem to work (none of the events are triggered).

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1276" height="849" creationComplete="drawImage()">
    <mx:Script>
        <![CDATA[
                import mx.controls.Alert;
                import mx.utils.Base64Decoder;

                private function loaderCompleteHandler(event:Event):void {
                        Alert.show("loader done");
            }

            private function errorHandler(e:IOErrorEvent):void {
                Alert.show("error" + e.toString());
            }

                public function drawImage() : void
                {
                        var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
                        var l : Loader = new Loader();

                        var decoder : Base64Decoder = new Base64Decoder();
                        decoder.decode(b64png);
                        var bytes : ByteArray = decoder.flush();


                        l.addEventListener(Event.COMPLETE, loaderCompleteHandler);
                        l.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                        l.loadBytes(bytes);

                }
        ]]>
    </mx:Script>
    <mx:Image x="10" y="10" width="155" height="118" id="image1"/>
</mx:Application>

Can someone please tell me what I did wrong?

Answer 1

If you decode the image data into a ByteArray then you can use Loader.loadBytes(byteArray) to load it as an image.

Answer 2

I tried the Loader suggestion, but couldn't get it to work (that is, the loader doesn't seem to be doing anything and non of the events are called. What am I doing wrong?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1276" height="849" creationComplete="drawImage()">
    <mx:Script>
     <![CDATA[
      import mx.controls.Alert;
      import mx.utils.Base64Decoder;

        private function loaderCompleteHandler(event:Event):void {
       Alert.show("loader done");
            }

            private function errorHandler(e:IOErrorEvent):void {
                Alert.show("error" + e.toString());
            }

      public function drawImage() : void
      {
       var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
       var l : Loader = new Loader();

       var decoder : Base64Decoder = new Base64Decoder();
       decoder.decode(b64png);
       var bytes : ByteArray = decoder.flush();


       l.addEventListener(Event.COMPLETE, loaderCompleteHandler);
       l.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

       l.loadBytes(bytes);

      }
     ]]>
    </mx:Script>
    <mx:Image x="10" y="10" width="155" height="118" id="image1"/>
</mx:Application>

Answer 3

You can assign the byte array returned from the decoder directly to the image's source property.

HTH,

Sam

---

We're hiring! Developers and QA in Washington, DC area (or looking to relocate) should send resumes

to [email protected].

---

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
 <mx:Script>
  <![CDATA[
   import mx.utils.Base64Decoder;

   private function init():void {
    var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
    var decoder : Base64Decoder = new Base64Decoder();
                decoder.decode(b64png);
                var bytes : ByteArray = decoder.flush();
    img.source = bytes;
   }
  ]]>
 </mx:Script>
 <mx:Image id="img" />
</mx:Application>

Answer 4

You could use something this to load the image:

var deco64:Base64Decoder = new Base64Decoder;

deco64.decode("base64StringWithTheImageData");

var arrBytes:ByteArray = deco64.toByteArray();

img.load(arrBytes);

Hope this helps!