 Saving BitmapData to Server in Flash 8Posted on March 15, 2006 by Grant SkinnerA while back, I posed a challenge to devise a system that would let you save BitmapData objects to the server from Flash 8 (in AS2). Since then, I have seen a few great attempts, all of which were too slow and intensive to be of much use (imho). I’ve also seen one successful implementation by Craig Swann at webcamtastic (which is a great use of Flash 8 btw). In the meantime, I’ve been working on my own system. I had 3 goals:
I managed to build out the compression/encoding routine in Flash a couple months ago, but then things got busy and we never finished the back-end support. In the last week we finally freed up a couple hours and put together a proof of concept. Overall I’m really happy with it. It uses down-sampling (to 12bit color) and run-length compression to convert a BitmapData object into a UTF-8 string and sends it to the server via Remoting. It can convert a 320×240 image in just over one second on my G5, resulting in 50-150kb of string data. This is uploaded to the server in a few seconds (dependent on connection speed), and converted into a 50% JPEG, which is of pretty decent quality except for some banding on areas of solid color as a result of the downsampling.
I also have engines that work with greyscale and black and white images (which of course are even smaller). More demos to come, I’m sure. ActionScript 3 invalidates all this of course, but it’s always fun to tackle a challenge. [[UPDATE: Added to Gallery Incomplet]]
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
25 Comments
plzzzz let us see u r code !!!
Posted by: reremoon on Mar 15, 2006 10:45am URL: http://www.is-webdesign.com
Another save/generate bitmap experiment
http://double-quotes.com/smartchart/smartchart.htm
Posted by: Jerome on Mar 15, 2006 11:01am
It is amazing, it would be great if you could share the code.
Posted by: S Yeh on Mar 15, 2006 6:05pm
Now im doing something similar and without compression the results are good too.
I take all the pixels of the image with two for loops (one for x axis and one for y axis) and with getPixel() method, i put this info into one array and send it to the server.
The funniest of all of this is merge your gOOifier with this method to save images :D
Bye!
Posted by: Elecash on Mar 16, 2006 5:21am URL: http://www.elecash.org/blog
Hmmm, I must say that I feel a bit hurt. "slow and intensive" - I fear that you are referring to my BitmapExporter class?
Did you check out its latest version? If the drawing demo appears slow it might be because the image size is 500x425 pixels which results in about 11x the amount of data of a 160x120 webcam image. For sizes like these you simply have to go for multiple-passes because otherwise you will get the "Flash player is running slow" warning message. For tiny images like webcam-shots my class includes also fast modes because for those sizes the time to compress the data often takes longer than if you simply send it uncompressed.
But well - I'm really looking forward to see more demos of your class - how about one handling a 320x240 or bigger image? BTW - do you use a special encoding scheme in order to make up for the data size doubling that internally happens when you send strings via remoting?
Posted by: Mario Klingemann on Mar 16, 2006 5:40am URL: http://www.quasimondo.com/archives/000572.php
Mario,
Just about to jump on a plane, so quick response for now:
I definitely wasn't picking on you. :) I've seen a number of attempts made. Yours was the first, and one of the best, and I'm still impressed by it.
My solution definitely appears to be faster though. Saving an image from your demo took just under 2.5 minutes (and the resulting image was actually incomplete... the bottom 250px were black). For a rough comparison, saving a 320x240 image using my technique takes just over 5 seconds on the same computer (this would likely almost double to 10 seconds for an image the same size as your demo).
Bear in mind though that mine will always downsample the color palette, whereas it sounds like yours is using adaptive palettes or something similar (which is much more CPU intensive, but results in much nicer output).
Gotta run. Much respect,
Grant.
Posted by: Grant Skinner on Mar 16, 2006 7:29am URL: http://gskinner.com/
Ah - thanks for making me feel better. 2.5 minutes? Whoa that's really strange. I fear that the bottleneck in this case is my server and GD, but maybe that's just a lame excuse. Well, it looks like I have to keep on improving it.
Cheers
Mario
Posted by: Mario Klingemann on Mar 16, 2006 7:58am URL: http://www.quasimondo.com/archives/000572.php
getting rid of chunking is a smart move, as that can add quite a lot of overhead for every chunk and hence slow down the whole process when used with small pictures.
to do mario justice: after having used marios class on pictures sized 1600x1200 and above (see the url) i can say that the speed of compressing and creating the palette is no problem at all.
Posted by: marko ritter on Mar 24, 2006 7:38am URL: http://www.spamrecycling.com
http://doodle.indev.no -- thats my attempt.. I'm keeping all 24bits of color, though, as the transparency often create mad gradients.
Posted by: einaros on Mar 30, 2006 1:41pm URL: http://www.indev.no
Hey Grant,
Very slick man.
It would be interesting to do a test by implementing a snapshot interval to capture the webcam video to the server. Then allow the user to play back the frames captured.
Great stuff!
cheers,
Eric
Posted by: Eric on Mar 30, 2006 5:31pm URL: http://eepmon.com
great app!
I've been playing with similar techniques, using LZW compression in stead of RLE, and also downgrading the palette.
I'm building my app to automatically make thumbnails of SWF files after uploading them to the server.
It works pretty well, But I'm still trying to find the balance between client side load and serverload.
compression takes time..so does uploading data :)
What do you use for color reduction?
I just started playing with bitmap objects, and I have a feeling it can be done quicker then my way..
keep up the good work!
Sander
Posted by: Sander on Apr 24, 2006 10:00am URL: http://peper.cover05.nl
hi
I was impressed by your exploit while looking on your site of gallery impcomplet⦠and I wondered whether one could for example thank you put the man fire in bottom of screen
thank you
PS: good work ^^
Posted by: remi on May 31, 2006 7:06am
I was impressed by your exploit while looking on your site of gallery impcompletâ¦
and I wondered whether one could for example put the man in fire in bottom of screen
thank you
PS: sorry for the first message^^
Posted by: remi on May 31, 2006 7:11am
Esto es diseño y programación los felicito desde aca..!
Posted by: Ricardo on Jun 4, 2006 11:45am
I am a programmer but i don't use Flash, I am mwriting a security program for schools and i need something just like this to take pictures of parents for the system. Can you e-mail me so i can ask you some questions. ASAP please for i need to have this type of thing running by October 22nd
Posted by: Jeffrey Meyer on Oct 16, 2006 8:47am URL: http://www.eyemetric.com
The project we are trying to provide to a Children's museum allows the kids to climb to the top of a rocket where there will be a wireless web cam that will feed the video down to a station for parents at the bottom. In that station they would have a touchscreen to take a photo of their child and email it to themselves.
We can get to the point where it takes a snapshot of the video, but don't have the expertise to save that image to a file. We have the capability to email the file once it is saved. So we need help with the all important saving aspect.
If anyone can help with this project, please let me know.
Posted by: Jeremy Gavin on Dec 19, 2006 8:48pm URL: http://treefort.com
Hi Marko Ritter and any one else who may know
How were you able to create images over 1600x1200 and above using the BitmapExporter?
I keep getting Error(undefined)
Posted by: DayStruct on Feb 21, 2007 8:43pm
Hi,
I am very much impressed with your work and am inspired to do such experiments.
This is one of my atttempts. Plz help me.
Is there a way to store the captured picture in the hard disk or sending it to the server by using flash AS-2? If there is one then, we can view the same picture in flash from server.
Posted by: Johny on May 16, 2007 12:18am
Hola me parece estupendo esta programacion, necesito lograr hacer algo muy parecido y no se por donde empezar ayudenme
Posted by: DAVER on May 21, 2007 9:46am
ok, it's perfect, but, cand you send me your code? please. really need it.
Thank's
Posted by: Skualo on Oct 2, 2007 9:59am
Sorry, but where is the source code?
Posted by: vale16381 on Feb 24, 2008 4:30am
Hi,
Can someone help me in creating a PDF out of the Bitmapdata that i send from flash to php? Or if there is any 3 party component to directly output pdf from flash, that will solve my issue. i have heard about blazepdf, but that doesnt seem to be free anymore. i dont have the budget to pay for components. Please help. thanks in advance.
Posted by: yashin on Feb 25, 2008 4:45am
i am working on a project similar to this i have done capturing images from camera but don't know how to save them on server please help me... i need it very urgent....
Posted by: Om Bissa on May 8, 2008 2:22am
Where can I download the source code of this movie, Saving BitmapData to serve in this very good Flash 8
Posted by: abrahan on Jun 14, 2008 1:51pm
is it possible to download the sourcecode? mail mee..
Posted by: kjell on Jul 1, 2009 1:35pm URL: http://sailsoft.se