In Tutorials Jun 2, 200890
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.
90 Comments
Jun 3, 2008
Great tutorial! I need something like this for an upcoming project. It’s like you read my mind
Jun 3, 2008
Does not work unless popup is enabled.
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
Jun 5, 2008
Nice tutorial! Short and straight to the point.
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
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.
Jun 10, 2008
Does not work with Flash Player 10 beta on Ubuntu Hardy. The downloaded file is just 4 bytes.
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
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
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
Jul 4, 2008
Works now on Ubuntu Hardy with Flash player 10 beta 2.
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!
Jul 7, 2008
@cy – I’ve added a file to the example download that should help you save the image to your server.
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.
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
Aug 11, 2008
Awesome. Is there anything similar for AS2?
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!!!!
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.
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.
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
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.
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
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
Sep 16, 2008
Help, I cant download the file!!! – I get a 404 not found – sounds exactly like what I want..
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?)
Sep 17, 2008
Thanks, just checked it again and the download works
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/
Sep 25, 2008
where should i download “ActionScript 3 Core Library”, i tryed google i can not download it.
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?
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
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,
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!
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!
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
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
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.
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
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
Dec 14, 2008
Nice tutorial,really helps a lot thanks!
Dec 24, 2008
download link is giving 404 page. Can you please check it.
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.
Jan 8, 2009
Hello Henry!
What a great topic!
Can I use the PHP code in a commercial project?
Thank you for sharing!
Kat
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?
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/
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?
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
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?
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 [...]
May 13, 2009
Hi,
Anyone could plz tell how can we use ASP.net or ASP instead of PHP
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!
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 !
May 19, 2009
[...] http://designreviver.com/tutorials/actionscript-3-jpeg-encoder-revealed-saving-images-from-flash/ [...]
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
Jun 4, 2009
its really a great tutorial! thanks for helping flash developers.
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.
Jul 4, 2009
Wow this is perfect and surprisingly short. I would also like to save the JPG to the server, and hopefully someone will fix or post a link to the source download and maybe contact me at wormywyrm@yahoo.com
Jul 4, 2009
Nevermind, I found it on Henry’s site, since he mentioned that this article was originally posted there. Here is the article on Henry’s site, complete with the source: http://henryjones.us/articles/using-the-as3-jpeg-encoder
Jul 4, 2009
The external file doesnt have any code that helps us save the JPG to the server however… Anyone have advice for that?
Jul 15, 2009
Hello, I was wondering if you could guide me a bit on this idea. I wanna make circuit drawing app, so after the users finish drawing the circuit, they can just copy the URL to post the image, would i able to do that by using this same PHP code? Or would i need to save the image on the server? Its there a way to avoid having to save on the server (since is a free server, i’m not sure if i’ll be able to), such as temporally exporting the image each the time the URL is called, instead of saving the image just once. Thanks in advance
Jul 17, 2009
Hey! I’ve just tried to use this time-saving and nice utility in my project, but something doesn’t work.
The URL request is performed and a blank page is opened but nothing happens afterwards (no dialog box opens to allow to save the JPG).
The curious part is that some strange characters are added automatically to the end of the URL.
I tried to do it without passing any variable through the URL (the file name of the image, which I directly assign in the PHP file) but still those characters are attached to the URL:
http://localhost/…/save_image_to_file.php?%C3%BF%C3%98%C3%BF%C3%A0
They’re displayed on the address bar as they are, not like their corresponding HTML entities as shown above (when I “copypasted” it on here they were automatically converted).
Could you or somebody else help me fix this? Thanks in advance!
Jul 17, 2009
Sorry for posting a second message, but these are the strange characters I get attached to the end of the URL:
http://localhost/…/save_image_to_file.php?ÿØÿà
Aug 6, 2009
Hello,
I need to ask you a question in case you have time … send me a mail so i know where to contact you
Aug 30, 2009
Please share the tutorial.
Sep 2, 2009
Please link me with the tutorial
Sep 2, 2009
I want to go through the tutorial.
Oct 21, 2009
finally!great tutorial!ive been looking for this for a week now, ive read 2 ebooks already, about AS3, AS2 and none of those references contains this good stuff.xD tnx tnx!
Oct 25, 2009
I’ve been wondering how people were able to do this, I had no idea that it was built into the core library. Thanks for sharing, awesome tutorial.
Oct 26, 2009
The link for ‘download sample code’ does not work, it shows a 404 error.
Oct 27, 2009
Hey Luis- you’re getting the ?+ wierd characters because you’re using GET instead of POST as the URLRequest.method for your URLLoader’s URLRequest object
Nov 6, 2009
Hi,
I try to save a jpg with your methode, but the jpg I save is juste a white rectangle.
I try to draw a movie clip in a bitmapdata, but it doesn’t work.
I search the solution since 2 days, but no way, it just doesn’t work. Can you help me ?
var jpg_180:BitmapData = new BitmapData(taille_defaut, taille_defaut);
jpg_180.draw(Clip_180);
Clip_180 is a MovieClip.
In advance, thank you.
Nov 23, 2009
[...] Saving Images from Flash [...]
Nov 24, 2009
Hi! Challenge:
How would you browse a file on your local disk, display it in a MovieClip AND THEN encode it and send it to a server-side script for file creation? The problem is that you can’t browse a file from your local disk if the file is in a different folder/path…as “FileReference.name” only returns the actual name of the file, without* path information. My goal was to use Flash/AS3 to resize the image and then create it in the server using the ByteArray data.
*PS: I know it’s a security thing but…it’s a pain!
Nov 30, 2009
Hi!
Thanks for your example.
I am actually working on a project now where I dynamically create images and save those images using FileReference. However, do you know of a way to suppress the save dialogue? Perhaps you could point me in the right direction.
Any help or direction is greatly appreciated!
Dec 2, 2009
Sample works great. I’m new to action script so I’m not sure I’m going about this the right way. My flash has an image that you can place other images on top. (think of a t-shirt designer). The shirt is fixed and stationary, but the placed image can be moved around the shirt and also resized. I’m using a draw with a matrix that sets the artwork in relative x,y postions and scales the image. It sort of works, but not really. When I save the JPG the scale is way off, but if I view it in the popup, it’s very close. ODD????
Dec 3, 2009
hrmmm… I’m having the same problem as Luis. And Sean, I’m using jpgURLRequest.method = URLRequestMethod.POST; anyone else know what this could be?
Dec 3, 2009
Me again…. had a go of your example too, and it is doing the same. BTW thanks for the tutorial
Dec 3, 2009
Oh, I get it. Me again…. something to do with being the localhost, tried it on my webserver and it worked. Cheers for the tutorial
Dec 4, 2009
its great……..
but the given link is not working
Dec 4, 2009
dude you are the most dude of all dudes! you duuude!! I am gona download the shit and show it to all dudes I know. Dude Dude!
Dec 6, 2009
Guy, thanks for that function, it saved my life.. LOL
But I tring, with no sucess, to upload that file to a directory on my server. Any clues?
Thanks!
Dec 11, 2009
Thanks for your work. I searched for it.
Could you reupload the sample code. The download is not available.
Good job.
Dec 15, 2009
Hi…anyone know if you can save the whole canvas? I have a movie where you dress up a person (moving other movies with mouse) I then want to save the final result…anyone know if you can save an area of the canvas rather than a movie?
thanks
Dec 30, 2009
hi,
nice tutorial.
Thanks for your work.
The download is not available.
Could you reupload the sample code?
any link for download sample code?
Jan 4, 2010
Eureka!!!, I found the sample code at: http://henryjones.us/wp-content/uploads/2007/11/jpeg_encoder.zip
Jan 8, 2010
hi – the sketchpad demo uploaded at the top of the page is exactly what I need to create for a webpage (I’ve hardly done any action scripting) wondering if there’s a demo file/code I could get?
Many thanks.
Jan 26, 2010
Thanks for the great tutorial!
I think it is very important to point out that this example will not work when you run the swf file locally. It only works when it is on a server.
Took me hours of php juggling before I realized that.
Jan 27, 2010
I am terribly sorry if this sounds stupid but I am new to flash and I just wanted to check. Seeing as I can figure out that these classes are not an intrinsic part of the flash player installation, would my users require to download these classes or is it the case that once I import them into my swf, they will be compiled along?
If they are not compiled along what do I need to do to ensure that they are included when I publish my swf? I am developing in Flash CS4 Professional and targeting Flash Player 9 or greater running in web browsers.
Thanks so much…
Feb 1, 2010
Very useful, thanks!
@George Oscar
You will need to import whichever classes you wish to use and upload them to the server along with the SWF, for example:
/*
import the JPGEncoder from the com/adobe/images folder. The ‘com’ folder should be in the same folder as your SWF file.
*/
import com.adobe.images.JPGEncoder;
Once the JPGEncoder class has been imported you can utilize the provided methods within. Users are not required to download these classes, otherwise nobody would want to use flash much
Hope that helps.
Feb 2, 2010
Hi,
Can anyone help me?
Im an intermediate user in Flash and this is my first time using ActionScript 3.0, im a little confused with this tutorial, where do I place the coding that is provided? I have downloaded the core lib but what class folder do I place it into?
Hope I dont sound stupid, any help is appreciated!
Feb 4, 2010
In Flash IDE
Edit-> Preferences -> Action Script 3.0 settings
Leave a Comment