6 Replies Latest reply on Dec 4, 2007 6:53 AM by Varangian

    Image object width and height

    Varangian Level 1
      Hello,

      I'm getting a situation here where I cannot know the width and height of an Image. I'm using mx:Script to load images dynamically from a WebServer. After setting the myImage.source = sourceUrl ... I'm trying to get its width and height.

      However it's always NaN or 0..... why is this? (Even when using contentHeight or contentWidth). I find it really strange...

      Thanks in advance
        • 1. Re: Image object width and height
          m_hartnett Level 3
          This data is not available to you until just before rendering.

          I have a popup image object that dynamically will display and resize the image container based on the image size.

          I have found that depending on what I was doing with the image I had the width and height of the image available in either the render or upateComplete events of the image. This means that the image needs to be added to the container before the h/w is available.

          I organize my code to make any last minute changes in the render event. Kind of a hassle but understandable since flex does not calculate some dimensions on an object till it is added to the container.
          • 2. Re: Image object width and height
            ChristopherCesarz
            mhartnett is correct.

            Another option is to define the image's width. There is an image property called maintainAspectRatio. Do this after defining a width so that the image does not look disfigured. Also, your best bet is to use .png files to maintain quality.

            Good luck!
            • 3. Re: Image object width and height
              Varangian Level 1
              Thanks ChristopherCesarz but that is not an option as I cannot define its width and height.. they are dynamic.


              mhartnett.....
              ok wait a minute... what do you mean by the updateComplete event?

              let's say I have a loop and I dynamically create Images on the fly and I need to know the width and height of each?

              how shall I tackle it? shall I add and EventListener to it?
              • 4. Re: Image object width and height
                peterent Level 2
                If you listen for the Event.COMPLETE event, the image, once it is loaded, should have its contentWidth and contentHeight values set - its width and height won't be set yet, however.

                As a rule, anything that involves a network request (like loading an image's data, an HTTPService request, etc) is asynchronous.
                • 5. Image object width and height
                  m_hartnett Level 3
                  Here is a sample application I wrote when I was trying to figure out how to handle some image / container issues.
                  It will simply add images to a container and print info to a log textArea as an event occurs.

                  You need to change the
                  imgA[0] = "assets/directions1.gif"; to point to a real image.

                  This will show when the events are triggered and when you have the width and height available.
                  Only use 1 image at first because it can produce a lot of output.

                  Notice that the renderHandler will continue to fire as you move your mouse over the buttons and as the scrollbar is being manipulated. Hit the Stop Handler to stop the data from being logged.

                  As far as how to handle the delayed availability of the width and height you need to organize your code to handle any image manipulations within the Event.Complete event. Kind of like what the sample app does. Instead of printing to a log do whatever you need to do.

                  hope it helps

                  <mx:Application
                  xmlns:mx=" http://www.adobe.com/2006/mxml"
                  width="100%"
                  height="100%"
                  layout="absolute"
                  backgroundGradientAlphas="[1.0, 1.0]"
                  backgroundGradientColors="[#d3ecb3, #d3ecb3]">


                  <mx:Script>
                  <![CDATA[
                  import mx.controls.Image;

                  private var stopHandlers : Boolean = false;

                  private function printDetails( e : Event) : void {
                  logText.text = logText.text + " height " + e.target.height + " ";
                  logText.text = logText.text + " width " + e.target.width + " ";
                  logText.text = logText.text + " contentHeight " + e.target.contentHeight + " ";
                  logText.text = logText.text + " contentWidth " + e.target.contentWidth + "\n\n";
                  }

                  private function updateCompleteHandler( e : Event) : void {
                  if(stopHandlers) return;

                  logText.text = logText.text + "Into updateCompleteHandler for " + e.target.source + "\n";
                  printDetails(e);
                  }

                  private function renderHandler( e : Event) : void {
                  if(stopHandlers) return;

                  logText.text = logText.text + "Into renderHandler for " + e.target.source + "\n";
                  printDetails(e);
                  }

                  private function completeHandler( e : Event) : void {
                  if(stopHandlers) return;

                  logText.text = logText.text + "Into completeHandler for " + e.target.source + "\n";
                  printDetails(e);
                  }

                  private function clickHandler() : void {

                  imgVBox.removeAllChildren();
                  stopHandlers = false;

                  var imgA : Array = new Array();
                  imgA[0] = "assets/directions1.gif";

                  for(var i : int=0;i<imgA.length;i++) {
                  var img : Image = new Image();
                  img.source = imgA ;
                  imgVBox.addChild(img);
                  logText.text = logText.text + "Adding image to container: " + imgA
                  + "\n";
                  logText.text = logText.text + " height:" + img.height + " ";
                  logText.text = logText.text + " width:" + img.width + " ";
                  logText.text = logText.text + " contentHeight:" + img.contentHeight + " ";
                  logText.text = logText.text + " contentWidth:" + img.contentWidth + "\n\n";

                  img.addEventListener(Event.COMPLETE,completeHandler);
                  img.addEventListener(Event.RENDER,renderHandler);
                  img.addEventListener("updateComplete",updateCompleteHandler);


                  }
                  }

                  ]]>
                  </mx:Script>
                  <mx:TextArea id="logText" width="484" x="169" height="447" y="28"/>
                  <mx:VBox id="imgVBox" x="10" y="28" height="90%" width="146">
                  </mx:VBox>
                  <mx:Button x="557" y="487" label="Add Images" click="clickHandler()"/>
                  <mx:Button x="439" y="487" label="Stop Handlers" click="stopHandlers=true"/>
                  <mx:Label x="10" y="11" text="Image Container"/>
                  <mx:Label x="165" y="11" text="Image Event Log"/>

                  </mx:Application>
                  • 6. Re: Image object width and height
                    Varangian Level 1
                    ah thanks man...seems to be **** it..

                    I'm quite new to flex... was missing the Event.COMPLETE