On a recent project (which will be revealed later this week) we needed to save an image created in a Flash application, using AS3 and PHP. It turned out to be really easy. Here’s how we did it…

In our case, we needed to capture the image from a webcam. So we first need to tell Flash to access the camera.

1
2
3
4

var video:Video = new Video();
var webcam = Camera.getCamera();
video.attachCamera(webcam);
addChild(video);

Next, when the user clicks a button, we need to take a picture and save it to the server. To keep this article moving along, we’ll skip setting up a button and just make the video one big button.

6

video.addEventListener(MouseEvent.CLICK, btnClicked);

And the function to handle the click event…

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var loader:URLLoader();
function btnClicked(e:MouseEvent):void{
	var bmd:BitmapData = new BitmapData(320,240,false,0x000000);
	bmd.draw(video);
	var jpgEncoder:JPGEncoder = new JPGEncoder(80);
	var byteArray:ByteArray = jpgEncoder.encode(bmd);
	var byteStr:String = Base64.encodeByteArray(byteArray);
	//ajax call to php script to save the image and return its url
	trace("Saving Image");
	var vars:URLVariables = new URLVariables();
	vars.imgData = byteStr;
	var urlrequest:URLRequest = new URLRequest("saveImg.php");
	urlrequest.method = URLRequestMethod.POST;
	urlrequest.data = vars;
	loader = new URLLoader();
	loader.load(urlrequest);
	loader.addEventListener(Event.COMPLETE, imageSaved);
}

Lets go over this function. First we make a BitmapData object to store the data of the bitmap. We set the size to 320 x 240 which is the default size of the webcam video. The “false” parameter makes it not use transparency, and the last parameter is the fill color. This color could be anything since our video will cover it up anyway. Then we draw the video object into the BitmapData object.

The next three lines format the bitmap into a JPG and prepare it for the PHP script.

After the trace statement, we prepare the URLRequest to pass the data to the PHP script. We create a variable to hold all the variables to be passed. In thise case there is only one variable: imgData. imgData is now the BitmapData object in JPG format as a big String. We create the URLRequest with the URL of our PHP script, set the method to “POST”, and attach our data to be posted.

I skipped the line just above the function, but now it comes in to play. The URLLoader will load data from a URL. We can use it to pass the image to the URL and get the result back. The loader object is declared outside of this function because we’ll need it in the next function too. So here we send off the URLRequest and set up an event listener to wait for the result.

Now let’s jump to the PHP script that receives the image and saves it to the server.

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$imgData = base64_decode($_POST['imgData']);
 
$path = "usrImages/";
$date = date("U");
$filename = $date.".jpg";
 
$i = 0;
$alpha = "abcdefghijklmnopqrstuvwxyz";
while(file_exists($path.$filename)){
	$filename = $date.$alpha[$i].".jpg";
	$i++;
}
 
$fh = fopen($path.$filename, "w");
fputs($fh, $imgData);
fclose($fh);
 
echo $path.$filename;

In the above PHP script, we collect the JPG in the $imgData variable, decoding it as we do. Next we need to set up a unique filename to use when we save it to the server. In this case, we use the data as the file name, and append a letter to the end if a file with the same name already exists. Then we create a new file, write in the data, and close it. And finally, we pass the url of this file back to the Flash app which is waiting for a reponse.

Back in Flash, here’s the script that receives the result.

27
28
29
30
31
32

function imageSaved(e:Event):void{
	trace("Image Saved");
	loader.removeEventListener(Event.COMPLETE, imageSaved);
	//optional
	ExternalInterface.call("showPhoto",loader.data);
}

We’re done with the event listener, so let’s remove it. What you do next is up to you and the needs of your application. In this case, we pass the URL of the image back to the container of our Flash app; we call a JavaScript function called “showPhoto”, passing the URL to the image we just saved. This is not a requirement, but I have it in here just to show how to call a JavaScript function from within Flash.

That covers the basics of saving an image from Flash to the server. Of course, there is plenty of room to make changes. You might want to update a database in the PHP script, or you might want to make it a bit more secure, or add some error handling. But this should get you started.

Stay tuned for our blog post later this week where we announce our app that puts this code to use.

This entry was posted by Kris on Monday, December 14th, 2009 at 1:32 pm and is filed under Code Logic. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: AS3, Flash, JavaScript, PHP, tutorial, web