In Tutorials Jun 2, 200855

ActionScript 3 Jpeg Encoder Revealed: Saving Images from Flash

Some amazing things can be done with images in ActionScript 3. One of these is the ability to encode a display object as a jpeg, and thanks to the JPEG Encoder included in the AS3 Core Library, doing this is actually quite simple. In this article, I will show you how to create a flash file that encodes a movieclip as a jpeg and allows the user to download it to their own computer.

To give you an idea of how this can be used, try out the sketch pad below:

First Things First

Before we get started, make sure to grab the ActionScript 3 Core Library. The Core Library contains several classes and utilities that make it easy to do things such as MD5 hashing, date formatting, and image encoding to name a few. Once you have the library, just drop it into your classes folder and you are ready to go. Now we can import the JPGEncoder.


import com.adobe.images.JPGEncoder;

Encoding the MovieClip

In this example, we are going to assume that our MovieClip of interest is named sketch_mc. In order to make use of the JPEGEncoder, our MovieClip needs to become a bitmap. To do this, we are going to use the BitmapData class. The contructor for this class requires two arguments: width and height. Since we want our jpeg to be the same size as sketch_mc, we use it’s width and height properties. Then by using sketch_mc as an argument, the draw method draws our MovieClip on to the bitmap.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

Now that sketch_mc is in bitmap form, we can use the JPGEncoder. When creating a new instance of this class, you can set the level of compression by passing in a number from 1 – 100. Then to create our jpeg, we call the encode method and use our BitmapData instance as the argument. The encode method returns the jpeg in the form of a ByteArray, which is simply an AS3 class that makes working with binary data a little easier.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

From the Flash Player to the Hard Drive

ActionScript 3 has done all the work neccessary to turn our MovieClip into a jpeg, but it needs a little help in making it available to download. To make this happen, we will need to post our ByteArray to a server side script using the URLRequest class. Since we are posting binary data, we must set the content-type to “application/octet-stream”. It is also important to note that the file being downloaded will need a name, so we pass that to our server side script as a query string.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
navigateToURL(jpgURLRequest, "_blank");

Below is the php script to where we are posting our jpeg. I chose to use php for this example, but any server side script will do.


if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
	// get bytearray
	$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];

	// add headers for download dialog-box
	header('Content-Type: image/jpeg');
	header("Content-Disposition: attachment; filename=".$_GET['name']);
	echo $jpg;
}

Note: I originally wrote this article for HenryJones.us. Since it was incredibly useful to a lot of people, I decided to make it available to all of the Design Reviver readers.

Download Sample Code

55 Comments

  • dZine
    Jun 3, 2008

    Great tutorial! I need something like this for an upcoming project. It’s like you read my mind :)

  • k64
    Jun 3, 2008

    Does not work unless popup is enabled. :(

  • Fernando Lins
    Jun 4, 2008

    There’s something wrong with the JPEG generated. This is how it appears to me on Mac OS X’s Preview.app : http://dznr.org/h9al

  • Angel Romero
    Jun 5, 2008

    Nice tutorial! Short and straight to the point.

  • Josh Read
    Jun 5, 2008

    Thanks again for all of your tutorials. I love this site! Seriously, I’ve learned a lot by reading it and I’m now pointing everyone from my company’s blog to it as well: http://www.ainsworthstudio.com – the company blog is at http://www.tacomagroups.com

  • Henry
    Jun 5, 2008

    Fernando Lins,
    It works fine for me on a Mac. Does anyone else experience this?

    Josh Read,
    You’re welcome. I am glad you are finding the information here useful.

  • jarav
    Jun 10, 2008

    Does not work with Flash Player 10 beta on Ubuntu Hardy. The downloaded file is just 4 bytes.

  • Stephen Braitsch
    Jun 19, 2008

    I wrote a similar tute that also allows for png creation using a similar class from the Adobe Core Lib.

    http://www.quietless.com/kitchen/upload-bitmapdata-snapshot-to-server-in-as3

  • Rob Frau
    Jun 20, 2008

    Hi. It’s a great source, but i use Win2003Server, is there a similar solution for asp or asp.net script file?

    Thanx

  • Marshall
    Jul 2, 2008

    The jpg doesn’t show up on Leopard for me. It appears as the question mark. Fernando Lins might have been referring to this same problem. I tried Safari and Firefox.
    Thank you for any help

  • jarav
    Jul 4, 2008

    Works now on Ubuntu Hardy with Flash player 10 beta 2.

  • cy
    Jul 6, 2008

    I’m trying to make this save back to my server (ie save the users’ art. Any ideas on how to make this happen? Is this even possible?

    Thanks for the tutorial and all your help!

  • Henry
    Jul 7, 2008

    @cy – I’ve added a file to the example download that should help you save the image to your server.

  • PatStars
    Jul 23, 2008

    Very cool. Works nice and smooth.

    Is it also possible to use a brush instead of just the basic line? How would be the best way to do this?

    Thanks.

  • Adam
    Aug 11, 2008

    Hello, this is a script I would like to use on my website, however i am not sure where to put the corelib on my pc. if you could explain that a little more that would be great. everywhere i have tried to place still gives me errors.

    Thanks

  • Jayden Lawson
    Aug 11, 2008

    Awesome. Is there anything similar for AS2?

  • Sushil
    Aug 13, 2008

    I taken the help of above code to design an sign pad. But the problem is its bit itchy and not smooth as the one http://dev.adamtstein.com/signpad/

    is there anyway to increase the smoothness of above sketch pad.

    Thanks in advance!!!!

  • Henry
    Aug 13, 2008

    @Sushil – If the one in the link you provided is yours, it looks pretty smooth to me. However, you could try increasing the frame rate of you movie.

  • Sushil
    Aug 13, 2008

    Thanks!!!But I tried even that. but its not working as smooth as the one I mentioned. Is there any other way of increasing the smoothness.

  • Ian
    Aug 26, 2008

    Hi Henry,

    I’ve tried downloading your sample code, compiled it using flash CS3 with the com.adobe.images.JPGEncoder.

    The flash works fine, but when I try “Download to Sketch”, it opens up a new window and ask if I want to save the jpg_encoder_download.php file. Did I miss out something?

    Thanks for the help

  • CH
    Aug 27, 2008

    Can anyone give an example of how to load a bitmap as the canvas_mc background, instead of the white fill? I can’t get this to work without hiding the drawing.

  • Shashi Kant
    Sep 9, 2008

    Dear All,
    Thanks for the solution what all of you have given. But do we have any such code which demonstrates draw with flash and save with java. Also, If I want to send some more parameters which cant be appended in the url( might be a large string) this code doesn’t work. Can Any body address my issues. If no, Ask me I shall give you the solution for Flash and Java

  • basitjee
    Sep 11, 2008

    I write an application in AS 2.0.It is a drawing sketch pad and I found on internet that help for a beginner to develop a sketch pad is not proper.So here is the link where you can download the zip file and also can read the instructions on the same page.
    Source code included
    http://fb.esnips.com/doc/b698295e-a3d9-40c0-964d-889057a7a7e2/sketch-pad

  • Ross
    Sep 16, 2008

    Help, I cant download the file!!! – I get a 404 not found – sounds exactly like what I want.. :(

  • Bec
    Sep 16, 2008

    Is it possible to apply this idea, but instead of saving it to the users hard drive, actually have the jpg forwarded onto our company email address (ie as a contact form?)

  • Ross
    Sep 17, 2008

    Thanks, just checked it again and the download works :)

  • Ryan
    Sep 18, 2008

    Hey, great stuff! For everyone asking about ASP.NET versions of this, I’ve posted code/tutorial on how to do the same thing with Actionscript 3 and a VB.NET webservice. http://ryanbosinger.com/blog/2008/saving-images-with-net/

  • Raja
    Sep 25, 2008

    where should i download “ActionScript 3 Core Library”, i tryed google i can not download it.

  • Daniel
    Sep 29, 2008

    Amazing! I’ve been looking for a way to save *.jpg files from flash for ages.
    I had the same problem as Ian: Clicking on save opened up a page, but I couldn’t save the image. Then I realised that there needs to be server support for the php, so I loaded it up to my site and it worked.
    Is there a way to perform the print even if the application is a desktop app and there is no access to the internet?

  • Rod
    Oct 2, 2008

    This is freaking awesome, I’ve spent ages searching for this, decompiling to finally find JPGEncoder and this tutorials makes it so easy

  • Hendri
    Oct 4, 2008

    wow, this is like dream come true for me :)
    thanks for the tutorial.

    btw i still can’t download the sample code, its shown Error 404 – file not found :(
    how can i get the file?

    any help would be great..

    thanks,

  • andi L
    Oct 8, 2008

    Even when i put the swf online in the same folder as the php, the very best i get when i click to save is a fresh browser window showing pages and pages of random symbols (im assuming bytecode).

    I dont get a dialog box asking me where i want to save the jpg, and when i check with my ftp program no jpg has been uploaded.

    Ive set folder/file chmods to 777, and cant seem to figure out what the problem is. I have no problems doing other php image based tom foolery on this server??

    Dopes ANYONe have an ideas what might be wrong, or is anyone else experiencing the same problems? It so frustrating when it appears to work for everyone else! :(

  • Gigs
    Oct 22, 2008

    There’s very little on the web on how to output the file in ASP.NET so I thought I’d post my solution up here for everyone to see. I also wanted to save the file to the server so I’ve included this code too.

    Here’s how I solved the problem:

    Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles MyBase.Load

    ‘ Get the image file byte data from the HTTP request

    Dim fileData As Object
    fileData = Request.BinaryRead(Request.TotalBytes)

    ‘ Set the filename
    Dim strFileName As String = “yourFilename.png”

    ‘ Map the path to the relevant save folder
    Dim strPath As String = Server.MapPath(”files/”)
    strPath = strPath & strFileName

    ‘ write the file to disk
    Dim oFile As FileStream
    oFile = File.Create(strPath)
    oFile.Write(fileData, 0, Request.TotalBytes)
    oFile.Close()

    ‘ push the file to the user
    Response.AddHeader(”Content-Disposition”, “attachment; filename=” & strFileName)
    Response.AddHeader(”Content-Type”, “image/png”)
    Response.ContentType = “application/octet-stream”
    Response.BinaryWrite(fileData)

    End Sub

    You’ll need to import System.IO in your ASPX file and the IUSR account will need write permission to the folder where you want to save the image.

    Hope this helps the non-PHP guys and gals!

  • Luiz Segundo
    Nov 11, 2008

    You can send paramns to! You just have to put it in the urlRequest like querystring and in case of accentuation you have to use “escape();”.

    []s

  • Brendan
    Nov 12, 2008

    Thanks so much for this code and tutorial! I just used it to build this quick flash app – it’s an Obama graphic generator for creating messages to support (or satirize) the new president-elect.

    Take a look if you’re interested:
    http://rocdove.com/blog/obama-graphic-generator/109

    -Brendan

  • Bham3dman
    Nov 14, 2008

    Fantastic! Thanks for posting this Henry! I have been looking for a way to do this for a very long time.

    @Gigs – Thanks for posting the .net code. The code worked perfectly for me.

  • Paul
    Nov 22, 2008

    Is this for Flex or Flash ?
    or either way ?

    If this works for Flash, how to put the libary into the class ?

    Sorry for my ignorance on Flash.

    Thanks,
    Paul

  • Neil
    Nov 27, 2008

    Hello,

    Is it possible to do this using URLLoader?

    The only problem I have with this approach is it opens a new window and there is no way to tell flash when it has finished.

    I would like to have my page tell the flash when it is completed creating the image.

    Can anyone offer any advice?

    Thanks

    Neil

  • Neo
    Dec 14, 2008

    Nice tutorial,really helps a lot thanks!

  • codemonkey
    Dec 24, 2008

    download link is giving 404 page. Can you please check it.

  • Nicholas Polet
    Jan 7, 2009

    Really useful tutorial, is exactly what I was looking for. That JPGEncoder class is just a godsend. I began writing one myself then came across this, saved me some time.

  • Kat
    Jan 8, 2009

    Hello Henry!

    What a great topic!
    Can I use the PHP code in a commercial project?

    Thank you for sharing!
    Kat

  • Dan
    Jan 15, 2009

    Hey Henry,

    The download link is giving me a 404 not found error? Would it be possible for you to fix it?

  • John
    Jan 23, 2009

    With flash player 10, I believe the server side script is now unnecessary through reference to the ‘FileReference’ method; see–http://blog.everythingflex.com/2008/10/01/filereferencesave-in-flash-player-10/

  • Miguel Arroyo
    Jan 26, 2009

    Hi! First I wanna say thank you, knowledge sharing is the next step to a mindRevolution.

    I’m a supernewbee in php and I have a question. What if, instead of download, I wanted the image to get stored on server?

  • Ahmad
    Apr 2, 2009

    Hello,
    I’m so happy that I could find this tutorial. However, I couldn’t find the source codes. Would you please put the files back there?
    Thanks

  • Pritam
    Apr 29, 2009

    I tried to run this application with PHP. But when I compiled the flash it opened the IE window with “open” option and given error i.e.

    Notice: Undefined index: HTTP_RAW_POST_DATA in D:\truecar\truecar\imageEncoder\jpg_encoder_download.php on line 2

    That means HTTP_RAW_POST_DATA is not getting properly from flash post.

    Can anybody help me on this issue? How I can run this app successfully and what type of settings are required?

  • Saving a MovieClip as an Image | Illumifi Interactive
    May 5, 2009

    [...] a SWEET tutorial on how to save any MovieClip (DisplayObject) as a jpg or png [view tutorial] This entry was posted on Tuesday, May 5th, 2009 at 12:51 pmand is filed under ActionScript 3.0 [...]

  • Sajay
    May 13, 2009

    Hi,

    Anyone could plz tell how can we use ASP.net or ASP instead of PHP

  • Aurora
    May 14, 2009

    Thanks for sharing this code. I have a question though.. How do you set the screen position for saving the image? I want to save an area of the screen and I can’t specify the x and y coordinates for it.. Thanks! :)

  • Horous
    May 18, 2009

    Hi !
    Thanks for sharing this nice and clear piece of code…
    Just like cy above, I’d like to save the resulting jpg to the server. You said there was a code example in the source zip, but the link appears to be broken…
    Could you please paste here the corresponding code or fix the link ?
    Thanks again !

  • Flash Tutorial: Very Cool Effect… Drawing and Saving Jpegs « Digital Cognition
    May 19, 2009

    [...] http://designreviver.com/tutorials/actionscript-3-jpeg-encoder-revealed-saving-images-from-flash/ [...]

  • Pushpa
    Jun 1, 2009

    Hi

    Thanks for the tutorial. I am not able to download the source files from the provided link. It would of great help if you can provide me with the source files.

    Thanks again
    Pushpa

  • Kishor
    Jun 4, 2009

    its really a great tutorial! thanks for helping flash developers.

  • ketan
    Jun 11, 2009

    we are new to flash and we are not able to run this code as pencil which is showing in flash area is not able to move here and there and so that we are not able to write or sketch anything. also download code in zip also giving us 404 error, can anyone explain this in bit simple manner ?

    ketan.ajani@gmail.com – You guys can also send me your reply on this id as i am in bit hurry for this due to tight dead line.

    Regards.
    - Ketan Patel.

Leave a Comment

Recent Articles

Tags

More Useful Stuff