Upload An Image Form An Image Container Options

[tfcenturion]

Hi there,

Im having great fun playing with this Flex and im thinking of switching over to it for most of the Apps i need to create. Major thanks to ibrent for his wicked tuturiol learned a lot from that one, cant wait for your next one.


On to me issue, i have scoured the net to get info on how you can upload an image from a image container using php.




EDIT {This has now been resolved, please check my third post for full code. }


Paul

[tfcenturion]

Hi All,

Small update, i have been able to get the base64 string to the webpage now using this code.

CODE

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="500"
creationComplete="setUpCam()">
    <mx:Script>
        <![CDATA[
            import com.dynamicflash.util.Base64;
            import mx.graphics.ImageSnapshot;
            import flash.net.navigateToURL;
            import flash.net.sendToURL;
            import flash.net.URLLoader;
            import flash.net.URLRequest;
            import flash.net.URLVariables;

            import mx.graphics.codec.PNGEncoder;

            private var cam:Camera;

            private function setUpCam():void {
                cam = flash.media.Camera.getCamera("1");
                vid.attachCamera(cam);
            }

            private function saveImage():void {
                
                // TAKE SNAPSHOT OF IMAGE. //
                var sSBD:BitmapData = ImageSnapshot.captureBitmapData(vid);
                
                // ENCODE SNAPSHOT. //
                var encode:PNGEncoder = new PNGEncoder();
                var ba:ByteArray = encode.encode(sSBD);
                  
                   var b64String:String = Base64.encodeByteArray(ba);
                
                
                var urlVars:URLVariables = new URLVariables();
                urlVars.camData = b64String;
                
                var urlRequest:URLRequest = new URLRequest("http://localhost/Flex Projects/imageSave/upload2.php");
                urlRequest.method = URLRequestMethod.POST;
                urlRequest.data = urlVars;
                
                // Use this line to view straight away. //
                flash.net.navigateToURL(urlRequest, "_blank");
                
                // Use this block just to upload the image. //
                //var loader:URLLoader = new URLLoader();
                //loader.addEventListener(Event.COMPLETE, uploadCompleted);
                
                //try {
                    //loader.load(urlRequest);
                //} catch (error: Error) {
                    //trace("Unable to load requested document.");
                //}
            }
            
            private function uploadCompleted(e:Event):void
            {
                trace("uploaded");
            }

        ]]>
    </mx:Script>
    <mx:VideoDisplay id="vid" width="320" height="251"/>
    <mx:Button label="Take Picture Now" click="saveImage()"/>
</mx:Application>

and found some code about the php side, this is the code which has been modified to work with above code.

CODE

<?php
// @author:Hedger Wang.
// This is for DEMO only, don't try this for production cause you should
// include all your style images from separate CSS file but the same HTML page.

// For IE, we use MHTML to include images within this page.
/*
* The IE7 User-Agent String.
* See http://blogs.msdn.com/ie/archive/2006/09/20/763891.aspx
*/



// For debugging, dieable cache.
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past



$FULL_REQUEST_URI = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$USER_AGENT = $_SERVER['HTTP_USER_AGENT'];
$IS_IE_ON_VISTA = eregi("MSIE", $USER_AGENT) && eregi("Windows NT 6.0", $USER_AGENT);

/**
* Due to the security bug/restriction on Vista, an MHTML document has to be loaded
* with the URL "mhtml:http://example.com....." and the MIME type has to be text/plain.
* Below is the hacky workaround for this issue.
*/

if($IS_IE_ON_VISTA && !isset($_GET['plaintext']) ){
   $uri = $FULL_REQUEST_URI;
   if(empty($_SERVER['QUERY_STRING'])){
      $uri .= '?';    
   }else{
      $uri .= '&';
   }
   $uri = 'mhtml:' . $uri . 'plaintext=1';
   header('Location: ' . $uri);
   exit;
}


$MHTML = eregi("MSIE", $USER_AGENT );
if($MHTML){
   //see http://www.w3schools.com/media/media_mimeref.asp for details about Content-type:message/rfc822
   //header('Content-Type:Multipart/related');
   if( $IS_IE_ON_VISTA ){
     header('Content-type: text/plain');
   }else{
     header('Content-type:message/rfc822');
   }
}

$testData = $_POST['camData'];

?>

<?php if($MHTML):?>
MIME-Version: 1.0
Content-Type: multipart/related; boundary="NEXT_MHTML_DATA_PART"

--NEXT_MHTML_DATA_PART
Content-Location:CONTENT_HTML
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit


<?php endif ?>
<!doctype html>
<html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcam Image via Base64 String.</title>
    </head>

    <body>
        <h1>Cross Browser Base64 Encoded Images Embedded in HTML</h1>
        <?php if($MHTML):?>
            <img src="cid:MHTML_IMG<?php echo $testData?>" />
        <?php else: ?>
            <img src="data:image/png;base64,<?php echo trim($testData)  ?>"  />
        <?php endif ?>
    </body>

</html>

This code does work in firefox but not in IE, does anyone a better way to save a image container straight to the server..???

Paul

[tfcenturion]

Hello again all.

I have been able to upload a base64 image to a server via php, the code i will post here has been drawn form various sources and i cant remember all the places i ended up at, so i you see portions of your code, cheers for putting that part up onto the internet.

OK, the flex side first, not much since my last try, iv just put it more into a function, so here is this part.

CODE

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="500"
creationComplete="setUpCam()">
    <mx:Script>
        <![CDATA[
            import com.dynamicflash.util.Base64;
            import mx.graphics.ImageSnapshot;
            import flash.net.navigateToURL;
            import flash.net.sendToURL;
            import flash.net.URLLoader;
            import flash.net.URLRequest;
            import flash.net.URLVariables;

            import mx.graphics.codec.PNGEncoder;

            private var cam:Camera;

            private function setUpCam():void {
                cam = flash.media.Camera.getCamera("0");
                vid.attachCamera(cam);
            }
            
            private function takeSnapShot():void
            {
                sendImageToServer(    "http://localhost/Flex Projects/imageSave/upload2.php",
                                    vid,
                                    "Paul");
            }

            private function sendImageToServer($url:String, $ibd:IBitmapDrawable, $fN:String, $vB:Boolean = true):void {
                
                // Take SNAPSHOT OF Bitmap Drawable Data. //
                var sSBD:BitmapData = ImageSnapshot.captureBitmapData($ibd);
                
                // Encode Bitmap Data to Required Codec, then Add to ByteArry. //
                var pE:PNGEncoder = new PNGEncoder();
                var ba:ByteArray = pE.encode(sSBD);
                  
                  // Encode Array to Base64. //
                   var b64String:String = Base64.encodeByteArray(ba);
                
                // Create and Set Post Variables. //
                var urlVars:URLVariables = new URLVariables();
                urlVars.name = $fN;
                urlVars.b64data = b64String;
                
                // Crearte and Set Post Request. //
                var urlRequest:URLRequest = new URLRequest( $url );
                urlRequest.method = URLRequestMethod.POST;
                urlRequest.data = urlVars;
                
                // Send Base64 Data. //
                if($vB)
                {
                    // Use this block just to upload the image. //
                    var loader:URLLoader = new URLLoader();
                    loader.addEventListener(Event.COMPLETE, uploadCompleted);
                    
                    try
                    {
                        loader.load(urlRequest);
                    }
                    catch (e:*)
                    {
                        trace("Unable to load requested document.");
                    }
                }
                else
                {
                    // Use this line to view straight away. //
                    flash.net.navigateToURL(urlRequest, "_blank");
                }
            }
            
            private function uploadCompleted(e:Event):void
            {
                trace("uploaded");
            }

        ]]>
    </mx:Script>
    <mx:VideoDisplay id="vid" width="320" height="251"/>
    <mx:Button label="Take Picture Now" click="takeSnapShot()"/>
</mx:Application>

Please note im only learning this so no grieff on how bad my coding style is.


and this is the final php code, again this has been compiled from various sources..

CODE

<?php
    // Check make sure Base64 Data has been sent. //
    if ($_REQUEST["b64data"] === NULL)
    {
        echo "missing parameter.";
    }
    else
    {
        // Decode Base64 Data. //
        $img_data = base64_decode($_REQUEST["b64data"]);
        
        // Copy passed Name and clean it. //
        $name = $_REQUEST["name"] === NULL ? "anonymousn" : $_REQUEST["name"];
        $name = strip_tags($name);
        
        // Check Image Size, if OK Create File. //
        $img_size = strlen($img_data);
        if ($img_size < 1000000)
        {
            // Get Current Data, This is not needed if flex is passing random Name Data. //
            $date = date("U");
            
            // Create Filename. //
              $img_filename = "images/$name.$date.png";
            
            // Open New File and Write Image To it. //
              $img_file = fopen($img_filename, "w") or die("can't open file");
              fwrite($img_file, $img_data);
            
            // Close File. //
              fclose($img_file);
            
            // This is for Viewing the File after it has been written and is not required. //
            echo "$date";
            echo "<br>";
              echo "<br>";
            
            echo "$img_size bytes uploaded.";
            echo "<br>";
            echo "<br>";
            
            echo "The Image.  Saved @ images/$name.$date.png";
            echo "<br>";
            echo '<img src="images/' . $name . "." . $date . '.png" />';
        }
        else
        {
          echo "image too big.";
        }
    }
?>

There are very few sites that i found on the net that gave this information out in a working app hence why i wished to give back what i had learned on this project.


all the best

Paul...

[Pamodu]

Hello there!..
This code below is what I have as you see , on the viewStack openninmg.

<mx:ViewStack id="websiteViewStack" width="100%" height="100%" backgroundImage="access/welcome.swf">

Althought the .swf is visible on the stage..but there is a problem filling the whole stage width and height.

the question is ..How can I adjust this .swf to inherit the viewStacks size?

A little help from my friend.

Pa-Modu
Sweden

--------------------

Pa-Modu

[Flocugh]

im on a $50 plan with optus and i want to buy an iphone of ebay but would i have to get another sim card? And how much does it cost to go on the internet on an iphone?



________________
unlock iphone

[Flocugh]

I have an unlocked iphone that I'm using in the country of Azerbaijan with a prepaid sim card.. Every few minutes I get a message on my phone that indicates new charges for internet use even though I'm not actually on the internet. I'm guessing it has something to do with the sim card, a feature that needs to be disabled or the service provider (Azercell). Has anyone ever had this problem or knows how to fix it?



________________
unlock iphone