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!
Thursday, June 19, 2008
Image Editor in Flex
Posted by
Mirko
at
03:10
Labels: ActionScript 3, Flex, PHP
Subscribe to:
Post Comments (Atom)
30 comments:
Really nice! and thanks for the tips.
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.
@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!
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?
Most of your links are broken.
@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!
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.
good,I also do this these days.
can you send me a source code ?
shitou2000ks@sina.com
thanks.
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 :)
my Email is cwmiss@163.com
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
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!
this is really a nice example,could you send me the source?
my Email is yssj@tom.com
Nice tips...!
Can you send me source i really need.
Myid: pdpatel85@gmail.com
Thanx in Advance.
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
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.
Hi,
That's very great sample for me. If possible,please send the source to ccmm18@hotmail.com.
Thanks a lot.
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
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
Could you send me the source code.
Thank you,
Christophe_jacquelin@yahoo.fr
Great, Great Example,
Please, Please could you send me the source code.
Thank you
level42@flashwerk.net
Hi,
It's very great sample for me.
If possible,please send the source
code ^^
ksddugi@nate.com
Thank you very much ^^
Could You please send me the spurce code of this app ?
Best regards
my email: howlingsun@gmail.com
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
Hi, nice work :) Please, send me source code ... sandi.krese@gmail.com
Best regards
Sandi
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
the download link is broken, can I have your source code and check its super functionality?
You will publish the code ? or not?
Tell us plz! =)
Hello, can I get source code of this app?
rouslan.tairov@gmail.com
Thanx
Post a Comment