5 Replies Latest reply on Oct 13, 2010 1:42 AM by djh88ukwb

    Save imageSnapshot to Server

    djh88ukwb Level 1

      Hello all.

       

      I am trying to make a little component that allows a user to take a picture using their webcamera and then save it to a server.  I have the application so far allowing the user to take a picture and its creating a bitmap.  I then have another button "Save" that then converts this bitmap into a Snapshot which i want to then upload but am having troubles doing this.  I can save it to the users desktop computer no problem.  Just cant upload =[

       

      My code is looking like this

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" >

          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                  import mx.graphics.ImageSnapshot;
                  import mx.graphics.codec.JPEGEncoder;
                  import mx.graphics.ImageSnapshot;
                 
                  [Bindable] public var bitmap:Bitmap;
                 
                  public function takeSnapshot():void
                  {
                      var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                      bitmap= new Bitmap(snapshot);
                      img.source=bitmap;
                  }
                  //Web Cam Stuff
                  private function videoDisplay_creationComplete():void {
                      var camera:Camera = Camera.getCamera();
                      if (camera) {
                          videoDisplay.attachCamera(camera);
                      } else {   
                      }
                  }
                  private function saveImageToFileSystem():void
                  {
                      var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
                      var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(img, 0, jPEGEncoder);
                      var fileReference:FileReference = new FileReference();
                      fileReference.save(imageSnapshot.data, "img123.jpg");
                  }
              ]]>
          </fx:Script>
         
          <mx:VideoDisplay id="videoDisplay"
                           creationComplete="videoDisplay_creationComplete()"
                           width="320" height="240" autoPlay="true" x="15" y="28"/>
          <mx:Image id="img" x="343" y="28"/>
          <s:Button id="button" label="Take Screenshot" click="takeSnapshot()" x="15" y="276"/>
          <s:Button click="saveImageToFileSystem()" label="Save Image" x="135" y="276"/>
          <s:Label x="54" y="348" text="Label"  useHandCursor="true" buttonMode="true" mouseChildren="false"/>


      </s:Application>

       

      If anyone could help that would be great.  I want to use a PHP backend if possible

        • 2. Re: Save imageSnapshot to Server
          djh88ukwb Level 1

          Hi and thanks for the reply.

           

          I have made some good progress on this.  I now have the application taking a bitmap screenshot, allowing the user to save this image to their desktop computer and then allow them to search their desktop computer for a file to upload.  I have done this using the file reference as you suggested.

           

          My only problem however is that i dont want the user to have to save the image onto their computer and then find it to upload it using the .browser() function.

           

          Is there anyway possible to pass a file to that browse direct?

           

          My code is this -

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" >

              <fx:Script>
                  <![CDATA[
                      import mx.controls.Alert;
                      import mx.graphics.ImageSnapshot;
                      import mx.graphics.codec.JPEGEncoder;
                      import mx.graphics.ImageSnapshot;
                     
                      [Bindable] public var bitmap:Bitmap;
                     
                      public function takeSnapshot():void
                      {
                          var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                          bitmap= new Bitmap(snapshot);
                          img.source=bitmap;
                      }
                      //Web Cam Stuff
                      private function videoDisplay_creationComplete():void {
                          var camera:Camera = Camera.getCamera();
                          if (camera) {
                              videoDisplay.attachCamera(camera);
                          } else {   
                          }
                      }
                      private function saveImageToFileSystem():void
                      {
                          var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
                          var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(img, 0, jPEGEncoder);
                          var fileReference:FileReference = new FileReference();
                          fileReference.save(imageSnapshot.data, "img123.jpg");
                      }
                     
                      //Upload Stuff
                      import mx.controls.Alert;
                      private var fileRef:FileReference;
                     
                      private const FILE_UPLOAD_URL:String = "http://www.******/upload.php";
                     
                      private function init():void {
                          fileRef = new FileReference();
                          fileRef.addEventListener(Event.SELECT, fileRef_select);
                          fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
                      }
                     
                      private function browseAndUpload():void {
                          fileRef.browse();
                      }
                     
                      private function fileRef_select(evt:Event):void {
                          fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
                      }
                     
                      private function fileRef_complete(evt:Event):void {
                          Alert.show("Image has been uploaded", "Success");
                      }
                     
                  ]]>
              </fx:Script>
             
              <mx:VideoDisplay id="videoDisplay"
                               creationComplete="videoDisplay_creationComplete()"
                               width="320" height="240" autoPlay="true" x="15" y="28"/>
              <mx:Image id="img" x="343" y="28"/>
              <s:Button id="button" label="Take Screenshot" click="takeSnapshot(),init()" x="15" y="276"/>
              <s:Button click="saveImageToFileSystem()" label="Save Image" x="135" y="276"/>
              <s:Button x="229" y="276" label="Upload" click="browseAndUpload()"/>


          </s:Application>

           

          If you look at it the process is - Take Screenshot, which create the bitmap, Save Image which converts it into Snapshot and then lets the user save it to their computer, Upload which lets the computer browse their desktop to search for an image to upload.

           

          However i want to merge steps two and three together, so that the user Takes a Screenshot, which saves it as a bitmap, this can be repeated many times as it is now, but then whent hey are happy with the image, they should just click Upload, which will save the image as a SnapShot and then upload it directly, without them needing to save it and then find it again using the .browse()

           

          So my question really is,

               Is it possible to pass a file into the browse straightway ?  Mainly passing a snapShot thru ?

           

          Just so you know my php code looks like this

           

          <?php

          $tempFile = $_FILES['Filedata']['tmp_name'];
          $fileName = $_FILES['Filedata']['name'];
          $fileSize = $_FILES['Filedata']['size'];
          $name = $_GET['extraVar'];
          $argh = $name.'.doc';

          move_uploaded_file($tempFile, "./" . $argh);

          ?>

           

          Thanks !

          • 3. Re: Save imageSnapshot to Server
            Lior Bruder Level 1

            Instead of  using:

            fileRef.upload(new URLRequest(FILE_UPLOAD_URL));

            you should use (from the link i sent), in order to create the post upload.

             

            var fileRef:FileReference = new FileReference();
            fileRef.addEventListener(Event.SELECT, selectHandler);
            fileRef.addEventListener(Event.COMPLETE, completeHandler);
            fileRef.browse();
            function selectHandler(event:Event):void
            {
                var params:URLVariables = new URLVariables();
                params.date = new Date();
                params.ssid = "94103-1394-2345";
                var request:URLRequest = new URLRequest("http://www.yourdomain.com/script.php");
                request.method = URLRequestMethod.POST;
                request.data = params;
                fileRef.upload(request, "Custom1");
            }
            function completeHandler(event:Event):void
            {
                trace("uploaded");
            }

            • 4. Re: Save imageSnapshot to Server
              djh88ukwb Level 1

              Hmm,

               

              Im sorry i dont understand what you have done there.

               

              I tried using it, but i still get the "Select a file to upload" dialog box.

               

              I want to get rid of this completly and just upload the image that has been stored in the ImageSnapshot variable named imageSnapshot.

               

              So then in the application i can have two buttons.

               

              First button take picture, second button upload picture.  The first button will take an imagesnapshot of the webcamera, the second button will upload that variable.

               

              SO the user never has to save the image to their computer, or browse their computer for a file.

               

              Is this at all possible ?

              • 5. Re: Save imageSnapshot to Server
                djh88ukwb Level 1

                Is anyone able to help with this ?  I'm really stuck.

                 

                I am even considering paying someone for their time 1