Save JPG JPEG PNG BMP Image Action Script 3

Posted by admin

May 4, 2008

Well finally i got time to Bring together a sample project. Kindly Let me know about your comments if this article is being helpful in solving your problem.

Kindly do write your comments on this post. This will encourage me to write more and more articles for action script community.

I have recently been working on an online Drawing Board application. We needed to save the flash movie as an Image in JPEGEncoder, PNGEncoder and BMPEncoder. I searched internet i got a lot of help but it was all dispersed on multiple site also i needed to save the JPEG, PNG, BMP in 300 dpi through flash action script. On the internet i found 2 ways to save the flash movie to any Image format such as JPEG, PNG, BMP.

1- Use the BitmapData class in action script 2/3 and get the data in string format that is basically value of each pixel and send the data 2 PHP file on the server. PHP file would prepare the header of the required image format and save the JPEG, PNG, BMP on the server as well and than at last when JPEG, PNG, BMP is saved than prompt user to download JPEG, PNG, BMP on their PC. This method had a major flaw that when data was very large in case of Bitmap image this method becomes really slow and some time script gives error on the browser.

Such Kind of solution is available on the following link http://www.quasimondo.com/archives/000645.php

Also i have attached the files that i downloaded from that website for the ease. The problem was i had to change DPI but PHP code was not that understandable. This solution is recommendable when using action script 2, as action script 2 does not have that much support for images.

2- Now for action script 3, Ah i love Action script 3 as always coming to rescue. I found classes written in Action Script 3. I have forgot the direct links from where i downloaded those files (As there were multiple locations). In this solution all the code is in flash action script.

There are 4 major classes BitmapData, JPEGEncoder, PNGEncoder and BMPEncoder. These classes prepare the header and every thing in action script and Post the Bytes as Array to PHP webpage. Now from here there are 2 ways One is PHP just temporary save file and prompt user to save or open the file. This had problems when a flash page was called from Actions script a new window in the browser open but if there is a Pop up blocker than no save dialog use to appear, as the page that was called the Popup blocker blocks it. The solution to solve this problem is use the “_self” parameter instead of “_blank”. This again had problem with internet explorer 6, but worked well with explorer 7 and Firefox. Problem was the the session expired on IE 6 once the JPEG, PNG, BMP image is saved on the server. This cause the save method just to run once on the browser instance than every time to make it work we needed to refresh browser and that was not acceptable in our solution.

Other way around is that, save the file on the server and i used a Timer in Action script which will continuously check as the file is completely saved on the server. If file is completely saved on the server than flash Call the download function of the FileRefrence class. This function downloads the file on user desktop. Now there is our choice weather to delete the file from server or to keep it on the server as well. This method is excellent as no browser or pop up blocker problem.

I have made changes in the following classes: JPEGEncoder, PNGEncoder and BMPEncoder. I have commented the section for the DPI settings in the classes you may look at the classes provided.

To use Above files make changes in the package declaration. To adjust to your older’s hierarchy.

Following is the code Accessing the above classes and Using the FileReference class to download the file on personal computer.

Code:



<pre>
////////////////////////////////////////////////////////////////////////////
//Imports 

flash.display.Stage;
import flash.display.Sprite;
import flash.display.MovieClip;
import com.adobe.images.JPGEncoder;
import com.adobe.images.BMPEncoder;
import flash.net.navigateToURL;
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;

////////////////////////////////////////////////////////////////////////////
//Initialization

var serverUniqueFileName:String;
mcSavingMsg.visible=false;

//Need to change the name to your sepcified server
var serverPath:String = "./";
//var serverPath:String = "http://localhost/";

var timer:Timer;
var isDownloadProgress = false;

////////////////////////////////////////////////////////////////////////////
// Call this function On Button Save
////////////////////////////////////////////////////////////////////////////

btnSave.addEventListener(MouseEvent.CLICK, clickHandlerBtnSave);

function clickHandlerBtnSave(e:Event)
{
	serverUniqueFileName=getUniqueFileName("Snapshot");
	if(comboFileFormat.selectedItem.label == ".jpg")
	{
		createJPG(mcBg, 85, serverUniqueFileName+".jpg");
	}
	else
	{
		createBmp(mcBg,serverUniqueFileName+".bmp");
	}
	//Similarly Save PNG could be added into the system
}

function timerHandler(event:TimerEvent)
{
}

function timerCompleteHandler(event:Event)
{
	isDownloadProgress=false;
}

var downloadURL:URLRequest;
var file:FileReference;

//////////////////////////////////////////////////////////////////////////////////////////////////////
function FileReference_download()
{
	trace("file to download "+serverPath+serverUniqueFileName);
	downloadURL = new URLRequest();
	downloadURL.url = serverPath+serverUniqueFileName;

	file = new FileReference();
	configureListeners(file);
	file.download(downloadURL, serverUniqueFileName+comboFileFormat.selectedItem.label);
}

function configureListeners(dispatcher:IEventDispatcher)
{
	dispatcher.addEventListener(Event.SELECT, selectHandler);
	dispatcher.addEventListener(Event.COMPLETE, completeHandler);
}

function getUniqueFileName(fileName:String):String
{
	var date:Date = new Date();
	return fileName+date.getTime();
}

function completeHandler(event:Event):void
{
	mcSavingMsg.visible=false;
	deleteDownLoadFile(serverUniqueFileName);
}

function selectHandler(event:Event):void {
	var file:FileReference = FileReference(event.target);
	trace("selectHandler: name=" + file.name + " URL=" + downloadURL.url);
}

//After file is downloaded on Desktop Call this function to delete file from the server
function deleteDownLoadFile(fileName:String)
{
	var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
	var jpgURLRequest:URLRequest = new URLRequest (serverPath+"jpg_encoder_download.php?delname=" + fileName);
	jpgURLRequest.requestHeaders.push(header);
	jpgURLRequest.method = URLRequestMethod.POST;
	var jpgURLLoader:URLLoader = new URLLoader();
	jpgURLLoader.dataFormat = URLLoaderDataFormat.VARIABLES;

	jpgURLLoader.addEventListener( Event.COMPLETE, deleteTempServerFile );
	jpgURLLoader.addEventListener( IOErrorEvent.IO_ERROR, sendIOErrorDeleteFile );

	function deleteTempServerFile(evt:Event)
	{
		var write = evt.target.data.write;
		trace ('DeleteFileWrite ' + write);
	}

	function sendIOErrorDeleteFile(event:Event)
	{

	}

	jpgURLLoader.load( jpgURLRequest );
}

//Fired when URL Loading Complete
function imageUrlLoaderComplete(evt:Event)
{
	var write = evt.target.data.write;
	if(write=="yes")
		FileReference_download();
}

function sendIOError(event:Event)
{
	trace("Error occured");
}

////////////////////////////////////////////////////////////////////////////////////
// Creating JPG Image
////////////////////////////////////////////////////////////////////////////////////
function createJPG(m:MovieClip, q:Number, fileName:String="snapshot.jpg")
{
	serverUniqueFileName=fileName;
	var jpgSource:BitmapData = new BitmapData (m.width, m.height);
	jpgSource.draw(m);
	var jpgEncoder:JPGEncoder = new JPGEncoder(q);
	var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

	var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
	var jpgURLRequest:URLRequest = new URLRequest (serverPath+"jpg_encoder_download.php?name=" + fileName);		

	jpgURLRequest.requestHeaders.push(header);
	jpgURLRequest.method = URLRequestMethod.POST;
	jpgURLRequest.data = jpgStream;

	var jpgURLLoader:URLLoader = new URLLoader();
	jpgURLLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
	jpgURLLoader.addEventListener( Event.COMPLETE, imageUrlLoaderComplete );
	jpgURLLoader.addEventListener( IOErrorEvent.IO_ERROR, sendIOError );
	jpgURLLoader.load( jpgURLRequest );
}

/////////////////////////////////////////////////////////////////////////////////////////
//Creating bitmap images
/////////////////////////////////////////////////////////////////////////////////////////

function createBmp(m:MovieClip,fileName:String="snapshot.bmp")
{
	serverUniqueFileName=fileName;
	var bmpSource:BitmapData = new BitmapData (m.width, m.height);
	bmpSource.draw(m);
	var bmpStream:ByteArray = BMPEncoder.encode(bmpSource);

	var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
	var bmpURLRequest:URLRequest = new URLRequest (serverPath+"jpg_encoder_download.php?name=" + fileName);
	bmpURLRequest.requestHeaders.push(header);
	bmpURLRequest.method = URLRequestMethod.POST;
	bmpURLRequest.data = bmpStream;

	var bmpURLLoader:URLLoader = new URLLoader();
	bmpURLLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
	bmpURLLoader.addEventListener( Event.COMPLETE, imageUrlLoaderComplete );
	bmpURLLoader.addEventListener( IOErrorEvent.IO_ERROR, sendIOError );
	bmpURLLoader.load( bmpURLRequest );
}</pre>

Here Server Path will be your server location where your files reside.

PHP File to save the image on the server can be downloaded here. PHP File Version 2

For Further details on saving file through FileRefrence class you may contact me if you get stuck some where.

Well finally i got time to Bring together a sample project. Kindly Let me know about your remarks if this article is being helpful in solving your problem.

Download Sample Project : Saving Image Actionscript 3 + PHP

A running sample can be viewed at the following link

www.imaginationdev.com/actionscript-blog/samples/save-image/SaveImage.swf

Action Script 3.0, Action Script Development, flash

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

i am gonna show this to my friend, bro

Save JPG JPEG PNG BMP Image Action Script 3

Kindly do write your comments on this post. This will encourage me to write more and more articles for action script community.

Comments

Leave a comment

Popular Articles

Recent Posts

Topics

Archives

Links

Topics