5 Replies Latest reply on Jun 22, 2010 9:25 PM by David_F57

    Bitmap Resizing At Runtime Results in Empty Graphic

    Miggl Level 1

      Hi All,

       

      I'm having the darndest time figuring out how to dynamically create thumbnails during runtime. Here's the code I have:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      
      
      <mx:Module
      
       xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
      
      library://ns.adobe.com/flex/spark" xmlns:mx="
      
      library://ns.adobe.com/flex/mx"width="
      
      100%" height="
      
      100%"
      layout="
      vertical">
      
      <fx:Declarations>
      
      </fx:Declarations>
      
      <fx:Script>
      <![CDATA[
      
      import flash.sampler.NewObjectSample;
      
      
      import flashx.textLayout.events.SelectionEvent;
      
      
      import mx.collections.ArrayCollection;
      
      import mx.controls.Image;
      
      import mx.controls.ProgressBarMode;
      
      import mx.core.IUIComponent;
      
      import mx.events.DragEvent;
      
      import mx.events.ItemClickEvent;
      
      import mx.graphics.codec.PNGEncoder;
      
      import mx.managers.DragManager;
      
      import mx.modules.ModuleLoader;
      
      import mx.utils.Base64Decoder;
      
      import mx.utils.Base64Encoder;
      
      
      import spark.components.Window;
      
      import spark.events.IndexChangeEvent;
      
      import spark.primitives.Rect;
      
      
      
      private var _fileReference:FileReference;
      
      private var _fileTypeFilter:FileFilter;
      
      private var _fileLoader:Loader;
      
      
      
      
      protected function btn_files_clickHandler(event:MouseEvent):void{
      
      this._fileReference = new FileReference();
      
      this._fileTypeFilter = new FileFilter("Typical Genealogy Source Files", "*.pdf;*.doc;*.jpg;*.jpeg;*.png;*.gif");
      
      this._fileReference.addEventListener(Event.SELECT, fileSelectHandler);
      
      this._fileReference.addEventListener(ProgressEvent.PROGRESS, loadingHandler);
      
      this._fileReference.addEventListener(Event.COMPLETE, loadPictureHandler);
      
      this._fileReference.browse([this._fileTypeFilter]); }
      
      
      
      private function fileSelectHandler(event:Event):void{
      
      this._fileReference.load();}
      
      
      
      private function loadingHandler(event:ProgressEvent):void{
      
      this.prb_fileUplaods.setProgress(event.bytesLoaded / event.bytesTotal * 100, 100);
      
      trace((event.bytesLoaded / event.bytesTotal * 100).toString() + " precent loaded.");}
      
      
      
      private function loadPictureHandler(event:Event):void{
      
      this._fileLoader = new Loader();
      
      this._fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoadedHandler) ;
      
      this._fileLoader.loadBytes(this._fileReference.data) ;}
      
      
      
      private function pictureLoadedHandler(event:Event):void{
      
      var original:BitmapData;
      
      var bmd:BitmapData = Bitmap(event.target.content).bitmapData;
      
      var originalWidth:Number = Bitmap(event.target.content).loaderInfo.width;
      
      var originalHeight:Number = Bitmap(event.target.content).loaderInfo.height;
      
      var m:Matrix = new Matrix();
      m.scale(100/originalWidth, originalHeight/100);
      original = 
      
      new BitmapData(100, 100); original.draw(bmd, m);
      
      
      this.img_test.source = bmd.getPixels(bmd.rect);
      }
      
      
      ]]>
      
      
      </fx:Script>
      
      
      <mx:ProgressBar id="prb_fileUplaods" labelPlacement="center" height="20" mode="{ProgressBarMode.MANUAL}" />
      
      <s:Button label="Choose File(s) ..." id="btn_files" height="20" click="btn_files_clickHandler(event)" />
      
      
      <mx:Image id="img_test" />
      </mx:Module>
      
      </mx:Modu<
      
      
      
      
      
      
      

       

      Any idea what I'm doing wrong?

       

      Thanks so much for all the help, I've been wracking my brain against this brick wall for the past two weeks!

       

      ~Mike

        • 1. Re: Bitmap Resizing At Runtime Results in Empty Graphic
          BhaskerChari Level 4

          Hi Mike,

           

          Try to use the function to get the scaled image for your Bitmap. Send the dimension to which you want to scale your image and the function will return the scaled bitmap data.

           

          private function rescale(original:BitmapData, width:int, height:int): BitmapData
             {
              var scaleX:Number=width/original.width;
              var scaleY:Number=height/original.height;
              var bd : BitmapData = new BitmapData(original.width*scaleX,original.height*scaleY);
              var mt:Matrix=new Matrix();
              mt.scale(scaleX,scaleY);
              bd.draw(original,mt);
              return bd;
             }

           

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

           

          1 person found this helpful
          • 2. Re: Bitmap Resizing At Runtime Results in Empty Graphic
            Miggl Level 1

            After doing some more research, I don't think the resizing is the issue. Consider the following code, that attempts to display the image through various methods:

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:WindowedApplication
            
             xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
            
            library://ns.adobe.com/flex/spark" xmlns:mx="
            
            library://ns.adobe.com/flex/mx">
            
            <s:layout>
            
            <s:VerticalLayout/>
            
            </s:layout>
            
            <fx:Script>
            <![CDATA[
            
            import mx.controls.ProgressBarMode;
            
            private var _fileReference:FileReference;
            
            private var _fileTypeFilter:FileFilter;
            
            private var _fileLoader:Loader;
            
            
            protected function btn_files_clickHandler(event:MouseEvent):void{
            
            this._fileReference = new FileReference();
            
            this._fileTypeFilter = new FileFilter("Typical Files", "*.pdf;*.doc;*.jpg;*.jpeg;*.png;*.gif");
            
            this._fileReference.addEventListener(Event.SELECT, fileSelectHandler);
            
            this._fileReference.addEventListener(ProgressEvent.PROGRESS, loadingHandler);
            
            this._fileReference.addEventListener(Event.COMPLETE, loadPictureHandler);
            
            this._fileReference.browse([this._fileTypeFilter]);}
            
            
            
            private function fileSelectHandler(event:Event):void{
            
            this._fileReference.load();}
            
            
            
            private function loadingHandler(event:ProgressEvent):void{
            
            this.prb_fileUplaods.setProgress(event.bytesLoaded / event.bytesTotal * 100, 100);
            
            trace((event.bytesLoaded / event.bytesTotal * 100).toString() + " precent loaded.");}
            
            
            
            private function loadPictureHandler(event:Event):void{
            
            this._fileLoader = new Loader();
            
            this._fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoadedHandler) ;
            
            this._fileLoader.loadBytes(this._fileReference.data) ;}
            
            
            
            private function pictureLoadedHandler(event:Event):void{
            
            var newBmD:BitmapData;
            
            var bmd:BitmapData = Bitmap(event.target.content).bitmapData; //failure occurs here?
            
            var originalWidth:Number = Bitmap(event.target.content).loaderInfo.width;
            
            var originalHeight:Number = Bitmap(event.target.content).loaderInfo.height;
            
            var m:Matrix = new Matrix();
            m.scale(100/originalWidth, originalHeight/100);
            newBmD = 
            
            new BitmapData(100, 100);newBmD.draw(bmd, m);
            
            
            this.img_test1.source = newBmD.getPixels(newBmD.rect);
            
            this.img_test2.source = bmd.getPixels(bmd.rect);
            
            this.img_test3.source = event.target.content;
            
            this.img_test4.source = this._fileReference.data;}
            ]]>
            
            
            </fx:Script>
            
            
            <mx:ProgressBar id="prb_fileUplaods" labelPlacement="center" height="20" mode="{ProgressBarMode.MANUAL}" />
            
            <s:Button label="Choose File(s) ..." id="btn_files" height="20" click="btn_files_clickHandler(event)" />
            
            <mx:Image id="img_test1" />
            
            <mx:Image id="img_test2" />
            
            <mx:Image id="img_test3" />
            
            <mx:Image id="img_test4" /></s:WindowedApplication>
            
            
            
            
            
            
            
            
            
            


            This tells me that the image is becoming corrupted when it is turned into a BitmapData object. See the line commented with "Failure occurs here?"

             

            Am I doing something wrong here? I am running Flash Player 10, Adobe Air 2.

             

            Thanks!

            • 3. Re: Bitmap Resizing At Runtime Results in Empty Graphic
              David_F57 Level 5

              hi,

               

              the following works, note that if you are uploading an image you should convert the bitmapdata back to an image format(i've done that for you) You just need to add the upload bits back in.

               

              David.

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                 xmlns:mx="library://ns.adobe.com/flex/mx">

               

              <s:layout>

              <s:VerticalLayout/>

              </s:layout>

               

              <fx:Script>

              <![CDATA[

              import mx.controls.ProgressBarMode;

              import mx.graphics.codec.JPEGEncoder;

               

              private var fi:FileReference = new FileReference();

              private var ff:FileFilter = new FileFilter("images","*.jpg;*.gif;*.png");

              private var fl:Loader = new Loader();

               

               

              protected function btn_files_clickHandler(event:MouseEvent):void

              {

              fi.addEventListener(Event.SELECT, fileSelectHandler);

              fi.addEventListener(Event.COMPLETE, loadPictureHandler);

              fl.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);

              fi.browse([ff]);

              }

               

              private function onComplete(event:Event):void

              {

              var originalWidth:Number =event.currentTarget.content.loaderInfo.width;

              var originalHeight:Number = event.currentTarget.content.loaderInfo.height;

              var m:Matrix = new Matrix();

              var scale:Number = 100/originalWidth;

              m.scale(scale, scale);

              var newBmD:BitmapData = new BitmapData(100,originalHeight*scale);

              newBmD.draw(event.currentTarget.content.bitmapData, m);

              var ba:ByteArray = new ByteArray();

              var encode:JPEGEncoder = new JPEGEncoder(100);

              ba=encode.encode(newBmD);

              img_test1.source=ba;

              }

               

              private function fileSelectHandler(event:Event):void

              {

              fi.load();

              }

               

              private function loadPictureHandler(event:Event):void

              {

              img_test4.source = fi.data;

              fl.loadBytes(fi.data);

              }

               

              ]]>

               

               

              </fx:Script>

               

              <s:Button label="Choose File(s) ..." id="btn_files" height="20" click="btn_files_clickHandler(event)" />

              <mx:Image id="img_test1" />

              <mx:Image id="img_test4" />

               

              </s:WindowedApplication>

               

              • 4. Re: Bitmap Resizing At Runtime Results in Empty Graphic
                Miggl Level 1

                Thanks for pointing that out. I gathered all my information from online examples, and many of them didn't have the JPGEncoder in them ... not sure how they were able to get their examples to run, I'm suspecting Flex 2 or 3 worked differently.

                 

                Anyhow, thanks so much! My thumbnail generator is finally up and running!!! WOOT

                • 5. Re: Bitmap Resizing At Runtime Results in Empty Graphic
                  David_F57 Level 5

                  hi,

                   

                  Most examples don't resize the image they just upload the original file which is already in the correct format, once you start manipulating an image you are working with its bitmapdata (basically raw pixels which means a lot more data than a compressed image), hence the need to convert your thumbnail back to a recognised format for upload.

                   

                  Glad you have your app working now .

                   

                  David