1 Reply Latest reply on Jul 31, 2008 7:17 AM by Jed Schneider

    using jpegEncoder object and filesystem

    Jed Schneider Level 1
      Hi, I also posted this in the Flex general forum, but it seems to be more AIR related since it deals with saving to the local disk. I am trying to create a simple AIR application that creates a thumbnail from an image component and saves it as a jpeg to the desktop. I am not sure where I am going wrong here, but the file is corrupt and no information is being written to it. If I look at the content (via the "more" command on the command line) it is 8 blank lines.

      Thanks so much,
      Jed

      =========

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">

      <mx:Script>
      <![CDATA[

      import mx.graphics.ImageSnapshot;
      import mx.graphics.codec.*;
      import mx.events.FileEvent;

      private function captureImg():void{

      //captures the image as a jpg and saves it to the desktop

      var codec:JPEGEncoder = new JPEGEncoder();
      //var ba:ByteArray = new ByteArray;
      var file:File = File.desktopDirectory.resolvePath("test.jpg");
      var filestream:FileStream = new FileStream;
      var snapShot:ImageSnapshot = new ImageSnapshot;

      snapShot = ImageSnapshot.captureImage(bigImg,72,codec);

      filestream.open(file, FileMode.WRITE);
      filestream.writeBytes(
      codec.encodeByteArray(snapShot.data,420,120),0,snapShot.data.length);
      filestream.close();
      }


      private function makeSmall():void{

      //makes the image on the screen thumbnail size

      var pic:Image = bigImg;
      pic.setActualSize(420, 120);
      }

      ]]>
      </mx:Script>

      <mx:VBox horizontalAlign="center" verticalAlign="top">
      <mx:Image id="bigImg" width="480" height="320" source="orignial/test2.jpg"/>
      <mx:Button label="Reduce Size" id="btnSmaller" click="makeSmall();" />
      <mx:Button label="Snap Thumbnail" id="btnThumbnail" click="captureImg();"/>
      </mx:VBox>

      </mx:WindowedApplication>

      Text
        • 1. Re: using jpegEncoder object and filesystem
          Jed Schneider Level 1
          Well I didn't get any feedback here on this problem. But I did figure it out.

          ===============

          <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:Script>
          <![CDATA[
          import flash.display.BitmapData;
          import mx.graphics.codec.JPEGEncoder;
          import flash.filesystem.*;

          private function captureImg():void{
          /*
          ** A bitmapData object is needed to contain the visual data
          */
          var bmpd:BitmapData = new BitmapData(
          smallImg.width,smallImg.height, false, 0xFFFFFF);
          bmpd.draw(smallImg);
          /*
          ** the bitmapdata object needs to be encoded into an byteArray with
          ** the JPEGEncoder. there is also a PNGEncoder for .png files if wanted
          ** The paramerter passed is the quality of jpeg we are encoding, 50 - 100.
          */
          var jpegEnc:JPEGEncoder = new JPEGEncoder(80);
          var ba:ByteArray = jpegEnc.encode(bmpd);

          /*
          ** Then we need to take the byteArray and save it to disk.
          ** this requries using a File and fileStream object. The try block
          ** catches the end of file error.
          */
          var file:File =
          new File("file:///Developer/Flex/thumbnailDemo/src/thumbnail/thumb1.jpg");
          var filestream:FileStream = new FileStream();

          try{
          filestream.open(file, FileMode.WRITE);
          filestream.writeBytes(ba);
          filestream.close();
          }catch (e:Error){
          trace(e.message);
          }

          filePath.text = file.name + " has been saved to " + file.nativePath;
          filePath.enabled = true;
          }


          /*
          ** makeSmall reduces the size of the main image and places it in
          ** the smallImg component to await capture
          */
          private function makeSmall():void{

          //makes the image on the screen thumbnail size

          var pic:Image = bigImg;
          var otherPic:Image = smallImg;
          smallImg.source = bigImg.source;
          otherPic.setActualSize(120, 80);
          }

          /*
          ** loadThumb loads the saved thumbnail to the savedPic component
          */
          private function loadThumb():void{

          var thumb:File =
          new File("file:///Developer/Flex/thumbnailDemo/src/thumbnail/thumb1.jpg");

          if (thumb.exists){
          var src:File = new File("file:///Developer/Flex/thumbnailDemo/src/");
          var relPath:String = src.getRelativePath(thumb);
          savedPic.source = relPath;
          filePath.text = "The Thumbnail has been sucessfully loaded from "
          + thumb.nativePath;

          }
          }
          ]]>
          </mx:Script>

          <mx:VBox horizontalAlign="left" verticalAlign="top">
          <mx:HBox>
          <mx:Image id="bigImg" width="480" height="320" source="orignial/test2.jpg"/>
          <mx:VBox verticalAlign="top" horizontalAlign="center">
          <mx:Label text="Thumbnail"/>
          <mx:Image id="smallImg" width="120" height="80" />
          <mx:Label text="Saved Thumbnail" />
          <mx:Image id="savedPic" width="120" height="80" />
          </mx:VBox>

          </mx:HBox>
          <mx:HBox horizontalAlign="left">
          <mx:Button label="Reduce Size" id="btnSmaller" click="makeSmall();" />
          <mx:Button label="Snap Thumbnail" id="btnThumbnail" click="captureImg();"/>
          <mx:Button label="Load Thumbnail" id="btnLoad" click="loadThumb();"/>
          </mx:HBox>
          <mx:Label id="filePath" enabled="false" />
          </mx:VBox>
          </mx:WindowedApplication>