0 Replies Latest reply on Jun 6, 2007 1:03 PM by TOdd_23523523

    Need some help trying to generate thumbnail images from large Jpegs

    TOdd_23523523
      Hello,
      I have some ActionScript 3.0 code, created with Flex that will load a large JPEG image (say 3000x2000 pixels) that I'm trying to create a 100 pixel thumbnail. I have the code working where I generate the thumbnail, but it's not maintaining the aspect ratio of the original image. It's making it square, filling in white for the part that doesn't fit.
      I've tried just setting the height or width of the new image, but that doesnt render well, either.
      To see what I'm talking about, I made a screen shot, showing the before image, and the rendered as thumbnail image: http://www.flickr.com/photos/taude/533544558/.

      Now, there's a few things important to note. I'm saving the thumbnail off as a JPEG. As you can see in my sample application, the original renders fine with the proper aspect ratio, it's when I'm copying the bytes off the bitmapdata object, where I need to specify a width and height, that the trouble starts. I've also tried using .contentHeight and .contentWidth and some division to manually specify a new bitmapdatasize, but these values seem to always have NaN.

      private function makeThumbnail():void{
      // create a thumbnail of 100x100 pixels of a large file
      // What I want to create is a a thumbnail with the longest size of the aspect
      // ratio to be 100 pixels.
      var img:Image = new Image();

      //Add this event listener because we cant copy the BitmapData from an
      /// image until it is loaded.
      img.addEventListener(FlexEvent.UPDATE_COMPLETE, imageLoaded);
      img.width=100;
      img.height=100;
      img.scaleContent=true;
      img.visible = true;

      // This is the image we want to make a thumbnail of.
      img.load("file:///C:/T5.jpg");
      img.id = "testImage";
      this.addChildAt(img, 0);

      }

      private function imageLoaded(event:Event):void
      {
      // Grab the bitmap image from the Input Image and
      var bmd:BitmapData = getBitmapDataFromUIComponent(UIComponent(event.target));

      //Render the new thumbnail in the UI to see what it looks
      theImage.source = new Bitmap(bmd); //new Bitmap(bmd);
      }

      public static function getBitmapDataFromUIComponent(component:UIComponent):BitmapData
      {
      var bmd:BitmapData = new BitmapData(component.width,component.height );
      bmd.draw(component);
      return bmd;
      }