3 Replies Latest reply on Sep 16, 2011 12:09 AM by Flex harUI

    How to make thumbnail for image

    Vladq

      Hi.
      I want to make thumbnail for selected image from local disk, but I don't know what is the proper way to do this.

      (this is all in AIR application)

      Here is the code that I try to use:
      // I select files from disk
      protected function selectTextFile(root:File):void
      {
      var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
      root.browseForOpenMultiple("Select Files", [imageTypes]);
      root.addEventListener(FileListEvent.SELECT_MULTIPLE, filesSelected);
      }
      // Then I try to make thumbnail for each
      protected function filesSelected(event:FileListEvent):void
      {
      var image_temp:Image;
      var width:Number = 100; // size of thumbnail
      var height:Number = 100;// size of thumbnail

      for (var i:uint = 0; i < event.files.length; i++)
      {
      image_temp = new Image();
      image_temp.source = event.files[i].nativePath;

      var bitmapData:BitmapData;
      bitmapData=new BitmapData(image_temp.width, image_temp.height); //here is error "ArgumentError: Error #2015: Invalid BitmapData."
      var matrix:Matrix = new Matrix();
      matrix.scale(width / image_temp.width, height / image_temp.height); // scaling the image
      bitmapData.draw(image_temp,matrix);

      // saving thumbnail to desktop                         
      var save:File = File.desktopDirectory.resolvePath("thumb_"+event.files[i].name);
      var fs:FileStream = new FileStream();
      fs.open(save,FileMode.WRITE);
      fs.writeObject(bitmapData);
      fs.close();
      }
      }

        • 1. Re: How to make thumbnail for image
          Flex harUI Adobe Employee

          Non-embedded images are loaded asynchronously, and components use a

          invalidation/validation mechanism.  Both of those concepts mean that you

          can't always march along to the next line of code.  You are getting an error

          because the width of the component is not set yet because it has never been

          validated.  You can call validateNow() to force validation, but then you

          will still have problems because the image will have 0 width since it hasn't

          loaded its image yet.  There is no way to force the loading.  The way to do

          that is to wait for the Event.COMPLETE.  You might still need to force

          validation or use callLater to wait for validation.

          • 2. Re: How to make thumbnail for image
            Vladq Level 1

            I modified my code. I've added EventListener Event.COMPLETE and then I use image.validateNow(), but it looks like this event never occurs. I used trace in the event handler function and waited for couple of minutes and nothing happened.
            This is the code that I use:

             

            private var file_temp:Array;
            private var file_i:int;

             

            protected function selectTextFile(root:File):void
            {
            var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
            root.browseForOpenMultiple("Select Files", [imageTypes]);
            root.addEventListener(FileListEvent.SELECT_MULTIPLE, filesSelected);
            }

             

            protected function filesSelected(event:FileListEvent):void
            {
            file_temp = new Array();
            file_temp = event.files;
            file_i = 0;
            generateThumb(file_i);
            }

             

            protected function generateThumb(i:int):void
            {
            if(i < file_temp.length)
            {
            var image:Image = new Image();
            image.source = file_temp[i].nativePath;
            image.addEventListener(Event.COMPLETE, imageLoadedHandler);
            image.validateNow();                         
            }
            }

             

            protected function imageLoadedHandler(event:Event):void
            {
            trace("imageLoadedHandler");
            var image:Image=Image(event.target);
            var width:Number = 100;
            var height:Number = 100;

             

            if(image.width > 0)
            {
            trace("if width >0");
            var bitmapData:BitmapData;
            bitmapData=new BitmapData(image.width, image.height);
            var matrix:Matrix = new Matrix();
            matrix.scale(width / image.width, height / image.height);
            bitmapData.draw(image,matrix);

            var save:File = File.desktopDirectory.resolvePath("thumb_"+file_temp[file_i].name);
            var fs:FileStream;
            fs = new FileStream();
            fs.open(save,FileMode.WRITE);
            fs.writeObject(bitmapData);
            fs.close();
            }
            file_i++;
            generateThumb(file_i);
            }

            • 3. Re: How to make thumbnail for image
              Flex harUI Adobe Employee

              Look like you are not adding the image to a parent container, so it isn't

              validating.  You can set it to visible=false and includeInLayout=false if

              you want to hide it, but it needs a parent.