3 Replies Latest reply on Jul 16, 2009 10:58 AM by jbenson@oper8

    Loading images using AIR

    seaneyefi Level 1

      Hi all,

       

      I'm in a situation where I make an API call to retrieve an image URL. Once I have this image URL I exectute the following regular JavaScript code (this.thumbnailURL is a url which resolves to an image which I want to load into my AIR application):

       

              _loadImage: function() {
                  this.image = new Image();
                  this.image.src = this.thumbnailURL;
                  if (this.image.complete) {
                      this._onImageLoad();
                  } else {
                      dojo.connect(this.image, "onload", this, "_onImageLoad");

                  }           
              },

       

              _onImageLoad: function() {
                  this.imageNode.src = this.thumbnailURL;

                  this.imageNode.style.display = "inline";
              },

       

      Its pretty simple. The this.imageNode.src is a simple image tag and I'd like to set the src attribute of this dom node to this.thumbnailURL once the image has been loaded.

       

      My question relates to setting the referer header for this image load and whether its possible with the code I have outlined above. For regular API requests I've set the referer header as follows (and this works fine)

       

              var req = new air.URLRequest(url);
              var headers = new Array();
              headers.push(new air.URLRequestHeader("Referer", "http://mywebsite.com"));
              req.requestHeaders = headers;

       

      but, as the image loading doesn't really involve a air.URLRequest, I'm not sure how to set the referer header for the image request.

       

      Any ideas?

       

      Sean

        • 1. Re: Loading images using AIR
          jbenson@oper8 Level 2

          I use an image cache function that does kinda what you want.   It's identical in function (and in some substance) to the Flex code posted here however written in JS.

           

          http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=4&postI d=10784

           

          While it may be overboard for what you want to do (writing images to disk etc) it at least demonstrates how to use URLRequest + loader to retrieve images.  At that point you could set the referrer as well.

          1 person found this helpful
          • 2. Re: Loading images using AIR
            seaneyefi Level 1

            Hi there Jason,

             

            Thanks for the reply ... its really close to what I need. I can now load the image from the API server with the referer header set. The only problem is in my onload function, I have the following code:

             

                    _onImageLoad: function() {

                          this.imageNode.src = this.thumbnailURL;

             

            This successful callback fires and judging by logging, I can see that the request is accepted by the API server - so I know I can access the image.

             

            However, setting the .src attribute on my image node doesn't seem to work. It probably initiates a second request to load the image into the this.imageNode dom node which doesn't work because the request is rejected due to the referer header being missing. Somehow I need to be able to point the imageNode dom node to use the data returned (i.e. the data in loader.data).

             

            If you've any suggestions on how to do that, I'd be very interested. Perhaps this is more a dom question that an AIR question - I'm not sure there's really a correct answer which will satisfy the constraints in which I'm operating.

             

            Cheers

             

            Sean

            • 3. Re: Loading images using AIR
              jbenson@oper8 Level 2

              Once you've loaded the image using (I assume) Loader and then saved it to disk using stream.writeBytes (assuming you're duplicating the flex example in js) then you'll want to load your image from wherever you stored it (ie air.File.applicationStorageDirectory.resolvePath)

               

              I've attached a bit of code (way rough, not so clean or documented either) that demonstrates the flex example above in JS and might help you along (although it sounds like you're already there to me and just need to point the image src to the local directory / image you saved to disk instead of the base url).

               

              Edit: oops forgot to add the file...

               

              Note:  you'll see in my example in the event_complete function that I have a todo on the add method when I encounter more than one image to add etc (ie build a queue instead of just handling one at once.)  For your purposes you may have to call wImageCache.get twice (unless you modify code) to get it to load from local cache on the first try.

               

              example usage

              img = new Image();
              img.src = wImageCache.get("http://www.adobe.com/ubi/globalnav/include/adobe-lq.png");