CODEWITHSUNDEEP
flashapache-flex
Himanshu Yadav
Himanshu Yadav

Reputation: 13587

Flex: Set bytearray to image component

I am trying build an image editing component to add caption to uploaded images. In this application first user uploads multiple images from desktop. User selects one of the image to add text to it. ImageWithText Component

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         height="600"
         width="800"
         creationComplete="init()"
         >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private var _sourceByteArray:ByteArray;
            public function source(value:ByteArray):void
            {
                _sourceByteArray = value;
            }   

            protected function init():void
            {
                if(_sourceByteArray == null)
                    return;

                centerImage();
            }
            protected function centerImage():void
            {
                imageMeme.x = width/2 - imageMeme.width/2;
                imageMeme.y = height/2 - imageMeme.height/2
            }

        ]]>
    </fx:Script>
    <fx:Declarations>

    </fx:Declarations>
    <mx:Image id="imageMeme" verticalCenter="0" horizontalCenter="0"/>

</s:TitleWindow>

Parent App:

private function showTextControls(event:MouseEvent):void
            {
                if(listOfSelectedImages.length == 0)
                {
                    Alert.show("Please select an image to edit.");
                    return;
                }
                var byteArrayCropImage:ByteArray  = getPreviewImageByteArray();
                imageWithText.source(byteArrayCropImage);
                imageWithText.addEventListener(FlexEvent.CREATION_COMPLETE, handleCreationComplete);

                PopUpManager.addPopUp(imageWithText,this, true);
                PopUpManager.centerPopUp(imageWithText);
}

It opens up a blank Title window with just text on it. No image gets loaded in title window.

Upvotes: 0

Views: 108

Answers (2)

BotMaster
BotMaster

Reputation: 2223

creationComplete fires once, are you sure it doesn't fire prior to passing the source?

Upvotes: 0

Panzercrisis
Panzercrisis

Reputation: 4750

I haven't hunted down the particular issue with the current approach, but the way I would do it would be to set up the ByteArray as a bindable variable, then link the Image's source to the ByteArray in the MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         height="600"
         width="800"
         creationComplete="init()"
         >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            [Bindable] // change 1/3
            private var _sourceByteArray:ByteArray;
            public function source(value:ByteArray):void
            {
                _sourceByteArray = value;
            }   

            protected function init():void
            {
                if(_sourceByteArray == null)
                    return;

                imageMeme.filters = new Array();
                // imageMeme.load(_sourceByteArray); // change 2/3
                centerImage();
            }
            protected function centerImage():void
            {
                imageMeme.x = width/2 - imageMeme.width/2;
                imageMeme.y = height/2 - imageMeme.height/2
            }

        ]]>
    </fx:Script>
    <fx:Declarations>

    </fx:Declarations>
    <mx:Image id="imageMeme" verticalCenter="0" horizontalCenter="0"
            source="{_sourceByteArray}"/> // change 3/3
    <mx:HBox id="box_Label">
        <s:Label id="labelOfImage" text="Blah Blah Blah"/>  
    </mx:HBox>

</s:TitleWindow>

Upvotes: 1

Related Questions