2 Replies Latest reply on Jun 2, 2012 2:39 AM by Coenni

    Loading Image from byte[] in flex mobile

    alinator11 Level 2

      Hi,

       

      I have been able to get BlazeDS set up to transfer images from my Flex Mobile UI to my Java server. In the real implementation, the server will do something to the image and then pass a new image back to Flex. For now, I just have the server accepting the image from Flex and then sending the same image back to flex like so:

       

      //java code

          @RemotingInclude   
          public byte[] setImage(String uid, byte[] image) {
              System.out.println("Image uploaded for " + uid + " total bytes: " + image.length);       
              return image;
          }

       

      The returned image is never loading when it is sent back. Here is my code for sending to the server:

       

       

      //flex mobile code

                  public function setPicture(camera:CustomCameraDisplay):void {
                      var image:Image = camera.capturedImage;
                      var jpgEncoder:JPEGEncoder = new JPEGEncoder();               
                      //var bytes:ByteArray = ByteArray(image.bitmapData.getPixels(image.bitmapData.rect));
                      var bytes:ByteArray = jpgEncoder.encode(image.bitmapData);

      //pdata is the PersistenceManager...
                      pdata = getPdata();
                      var uid:String = String(pdata.getProperty("uid"));
                      serviceObject.setImage(uid, bytes);
                  }

       

      Given that the image is being captured here and then sent to the server only to be sent back, I would expect that the loading would have been simple. However, I've not had any success at getting the image to load upon return. Here's the code in the object that tries to load the image that is sent back to the BlazeDS ResultHandler:

       

       

                 public function imageCaptured(imageBytes:ByteArray):void {
                      if(imageBytes == null || imageBytes.length == 0) {
                          noImageFound();
                      }
                      else {
                          if(imageClicked == 1) {
                              if(loader == null) {
                                  loader = new Loader();
                              }                       
                              loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderDone);

      //tried using a Loader because simply setting the source as the returned byte[] does not seem to work either...                    
                              loader.loadBytes(imageBytes);
                          }
                          else if...
                  }   
                 
                  private function loaderDone(event:Event) {               
                      image1.source = Bitmap(loader.content);
                      image1.visible = true;               
                      imageGroup.removeAllElements();
                      imageGroup.addElement(image1);
                  }

       

      Apart from the above, I've also tried

       

                     image1.source = imageBytes

       

      and

       

                      var bmp:BitmapData = new BitmapData(loader.content.width, loader.content.height, false);
                      bmp.draw(loader.content);
                      image1.source = bmp;

       

      All to no avail as I can never get the image to show up in the display. Can someone help me understand where I am going wrong, please?

       

      I am using Flex 4.5. This is a mobile project.

        • 1. Re: Loading Image from byte[] in flex mobile
          alinator11 Level 2

          I figured this out... In case any come across this, the problem was that I was passing values to objects and expecting them to live in referenced objects for as long as the object was referenced.  I figured I could pop screens off the stack and if I had passed reference to the screen that would replace the popped screen to the screen being popped and had that screen set variables on the lower level screen that I'd be able to retreive those variables when the lower level screen was back in view. That is not correct. The way to do this is:

           

          In the view that will be popped, add this code:

           

          override public function createReturnObject():Object {
                          return imageBytes;
                      }

           

          In the lower level view, the view being popped to, add this code:

           

                      private function initFormData() {                            
                          if(navigator.poppedViewReturnedObject != null) {                               
                              image.source = ByteArray(navigator.poppedViewReturnedObject.object);
                          }

          ....

          }

           

          Bam!

          • 2. Re: Loading Image from byte[] in flex mobile
            Coenni

            Hi, Friend. I have a problem in the same way but I send from java server byte[] and in flex side I need to make it image source. But because of the encoding  I could not make it. Could you help me?