2 Replies Latest reply on Jul 31, 2008 7:15 AM by Jed Schneider

    ImageSnapshot object - how to write to file

    Jed Schneider Level 1
      Hi,
      I am working on creating a demo AIR program that takes an image loaded into an image mxml component and with a button take a snapshot of that image, scales it to a thumbnail image size, and saves it to local disk.

      I took this original code from blog.flexexamples.com, added a ByteArray(ba) and on instantiation of the ImageSnapshot object "takeSnap" I included a thumnail scaling (height and width). When I run the debugger and create a stop point at the end of the captureImg() function, it says that the bytesAvailable for both the takeSnap object and the ba object are 0. However, on runtime there is data in the textbox when the event is fired. So.. I dont know how to take the data from the ImageSnapshot and pass it to a filestream. The documentation says that the jpeg encoder contains the metadata but it doesn't seem to have a method to write to disk. Thanks. I'm really stuck!


        • 1. Re: ImageSnapshot object - how to write to file
          Jed Schneider Level 1
          Ok folks, please, i am getting an end of file error, but I don't know if i need to open the filestream first, of if it is best to catch this error when capturing the bytearray (ba). I need to write this to file. All my attempts this morning create a corrupt file. thanks, Jed
          • 2. Re: ImageSnapshot object - how to write to file
            Jed Schneider Level 1
            Well in case anyone wants to know.. here is the answer

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

            <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>