Send bitmap data from Flex to Php

Question

I want to save a screenshot from my Flex app on the Webserver (LAMP). Here is the Flex code:

    private function getBitmapData( target : UIComponent ) : BitmapData
        {
            var bd : BitmapData = new BitmapData( target.width, target.height );
            var m : Matrix = new Matrix();
            bd.draw( target, m );
            return bd;
        }

Now, how do I send / receive this data to the server?

Answer 1

You are going to have to use a HttpService to post the data to a page on your website. When I implemented this I posted the Image data as a Base64 encoded string to a PHP page that used the GD library to save it to a png file on the server. Here is a simplified example of what my code looked like

Flex Code

public function saveImg():void{
    var bd:BitmapData = new BitmapData(mycanvas.width,mycanvas.height);
    bd.draw(mycanvas);
    var ba:ByteArray = PNGEncoder.encode(bd);
    var encoded:String = Base64.encodeByteArray(ba);
    var objSend:Object = new Object;
    objSend.data = encoded;
    objSend.filename = _imgResult;

    writeImage.send(objSend);
 }

<mx:HTTPService id="writeImage" url="/saveImage.php" method="POST" resultFormat="text" result="resultHandler(event)"/>

PHP File (saveImage.php)

<?php
//check for the posted data and decode it
if (isset($_POST["data"]) && ($_POST["data"] !="")){
    $data = $_POST["data"];
    $data = base64_decode($data);
    $im = imagecreatefromstring($data);
}
//make a file name
$filename = "test"

//save the image to the disk
if (isset($im) && $im != false) {
    $imgFile = "/etc/www/html/".$filename.".png";

    //delete the file if it already exists
    if(file_exists($imgFile)){
        unlink($imgFile);      
    }

    $result = imagepng($im, $imgFile);
    imagedestroy($im);
    echo "/".$filename.".png";
}
else {
    echo 'Error';
}
?>

On the flex side I am using the Base64Encode utilty from dynamicflash, but now that there is one built into flex you could use that instead. In your php config you will need to make sure you have the GD library enabled so that you can save the image.

Of course this is a very simple example and does not take into account all the error handling and security concerns needed, but should provide you a good base to get going with.