Thursday, June 19, 2008

Image Editor in Flex

I had a fun last night building the application which allows user to edit images directly on the server. There are couple of options like color, hue, saturation... Why? Because the current project i am working on is Flex CMS with integrated web analytics and image editor - all in one. Man, it turns me on! Anyway...

If you wonder how to export valid jpg or png files form Flex, this is how you do that. First, you need to download as3corelib form Google Code........ And that's about it! :) Really, it's easy as that! In the as3corelib package, there are two classes used for image encoding: JPGEncoder and PNGEncoder.
If you are using Flex 3, you have built in classes mx.graphics.codec.JPEGEncoder and mx.graphics.codec.PNGEncoder. What these classes do is to convert BitmapData object to valid JPG or PNG as a ByteArray. Since i am using PHP all the time, i will explain how this works with PHP (the PHP is used only for decoding and for displaying the image).

I made a simple class to achieve that - you can download it from here and check the methods here(as3corelib is not included in the download).
What happens when you convert BitmapData to JPG? Well, you can't do anything with it if you do not know how to actually display ByteArray.
First, you will need to encode ByteArray with mx.utils.Base64Encoder and to decode that data on the server. This is where PHP comes with base64_decode function. And that's it. :) When you check the class i provided, you won't have to think about it and PHP code is included in the class too - just call tracePHP function.

Make shore you check the application i made for testing. There are a couple of images of my naked wife you can edit and save to your computer.

Yeah... dream on!

30 comments:

Regis said...

Really nice! and thanks for the tips.

Dusty said...

If you run into any performance issues with jpg encoding, try encoding as .png files. From my informal evaluation, the png encoder in the corelib is between 2-3 times faster than the jpg encoder.

Mirko said...

@Regis: Thanks! I am glad you like it! :)
@Dusty: I agree with you that PNG encoder is faster than JPG encoder but think it is related with quality and size of data. Thanks on your comment!

Tony said...

Mirko, I really like the app. I would like to get started working with flex and creating some kind of photoalbum app but I have not been successful in finding example apps.

Would there be a chance that you can post the code, or maybe you know of some helpful links for me?

David A said...

Most of your links are broken.

Mirko said...

@tony: I will publish the source - give me one day or so... But if you are just about to start with Flex, then you will need to take a book and read it (i know how hard this can be). If you don't know anything about developing Flex applications, take this one: The Essential Guide to Flex 2. In this book you wont find some detailed explanations of what is going in the background but for the start, it's more than enough. If you are looking for more advanced examples and more detailed explanations, read this one:Programming Flex 2. Hope it helps.

@David: It's fixed! Thanks for letting me know! candymandesign.com will be down for couple of days so i changed the paths. Thanks again!

Tony said...

Great! thanks for the links/books. I will pass by the book store later on tonight and pick them up.

I already know how to develop in AS2 & 3 but in Flash, but I am not familiar with the Flex IDE and mxml. The essential guide you mention looks like will explain these things to me. I'll see if my book store has both of these books.

Anonymous said...

good,I also do this these days.
can you send me a source code ?

shitou2000ks@sina.com


thanks.

Anonymous said...

hi,candymandesign: i'm doing somework on image edit with flex3 then could you send me the source? i really need it,please , thank you very much :)

Anonymous said...

my Email is cwmiss@163.com

Anonymous said...

hi,this is really a nice example.can u send me the code of colourized image.plz its urgent.

My mail id is:
priyanka.evolko@gmail.com

larry said...

Hi, I am new to Flex, and want to build an online image editor, so can you send me a copy of your source code to me to learn? Here is my email: larrywo@gmail.com

Thanks ahead!

Anonymous said...

this is really a nice example,could you send me the source?
my Email is yssj@tom.com

Anonymous said...

Nice tips...!
Can you send me source i really need.
Myid: pdpatel85@gmail.com

Thanx in Advance.

ajay said...

Hi,This is really very stanging and helpful for every flex programmer and developer.I have need of this so please send me source code of this one.

ajaykymca@in.com

Thanks alot

bujji said...

Really nice application and also iam in a great need of it, i tried but iam unable to paint on the loaded image can you please send me the source to rajveerg@gmail.com.

Anonymous said...

Hi,
That's very great sample for me. If possible,please send the source to ccmm18@hotmail.com.
Thanks a lot.

sujit said...

Really nice application and also iam in a great need of it, i tried but iam unable to do.can you please send me the source to .
sujit271983@gmail.com

Suresh said...
This post has been removed by the author.
Suresh said...

Dear Mirko,

I am amazed with your example, please us know where we can download the sourcecode, i did a right click to viewsource but its not there.

I hope your example ll help many flexians who are learning :-)

Please let me know the sourcecode my mail id is suresh.sci@gmail.com

Anonymous said...

Could you send me the source code.

Thank you,
Christophe_jacquelin@yahoo.fr

Anonymous said...

Great, Great Example,
Please, Please could you send me the source code.

Thank you
level42@flashwerk.net

Anonymous said...

Hi,
It's very great sample for me.
If possible,please send the source
code ^^
ksddugi@nate.com
Thank you very much ^^

Anonymous said...

Could You please send me the spurce code of this app ?

Best regards
my email: howlingsun@gmail.com

Anonymous said...

I am amazed with your example,
I working about images.please send your source to me!very much. I try to parse your code ,but have error in TweenFilterLite.
E-mail:xuhongming@coship.com

Anonymous said...

Hi, nice work :) Please, send me source code ... sandi.krese@gmail.com

Best regards
Sandi

Mahedi said...

Hi,This is really very good and helpful for every flex programmer and developer.I hope your example will help many developer who are learning.

Please let me know the source code my mail id is:
mahehasan@yahoo.com

TOTO said...

the download link is broken, can I have your source code and check its super functionality?

Sebastian said...

You will publish the code ? or not?
Tell us plz! =)

Rouslan Tairov said...

Hello, can I get source code of this app?

rouslan.tairov@gmail.com

Thanx