posts - 32, comments - 52, trackbacks - 0

My Links

News

Archives

Image Galleries

About Me

Export Canvas to PNG and save it in your local folder

** Just a last minute update, from Arnoud: 
Found the ultimate Silverlight PNG encoder with zip-compression..
http://www.codeplex.com/Wiki/View.aspx?ProjectName=imagetools
And about the license, can be used for commercial purpose (check this thread: http://silverlight.net/forums/p/105680/250333.aspx#250333)
And about... saving a canvas as PNG compressed:
Hope to get some extra time to create a new post with all this new updates :-).
**
One of the missing functionality of SL 2.0 was the ability to export a canvas content as an image and let the user save it to his local file storage. We had to use nasty tricks to implement that: rountrip to server side, draw again the content using GDI+ (server side) and dumping that in a bitmap…
In SL 3.0 they have incorporated:
-          A class called WriteableBitmap, that allows us dumping a canvas content into an image.
-          A Save File Dialog that allows us to save the given image in the client’s local file system.
But… it still has a limitation:
-          SL 3.0 does not implement code to save as PNG or JPEG.
 
Is there any solution for this? Well the thing is you can implement in SL an algorithm to save in such formats, pain in the… J well we are lucky somebody has already done that for us.
I have packed in a library the excellent work from:
-          Andy Beaulieu has implemented a class that get the writableBitmap content and encode in PNG format.
 
 
-          Tom Giam, code to grab that stream and save it to local.
-          Pete Brown: good concept explanation plus excellent support (interesting to read the comment section)
The library is called ImageExportLib, and how you can use it:
            CanvasToPNG canvasToPNG = new CanvasToPNG();
 
            // It will export to PNG the canvas content
            // parameter canvas ID
            canvasToPNG.ShowSaveDialog(canvasToExport);
 
About the sample: Draws some basic shapes and let’s you save it as PNG on your local file system:
 Sample application
You can download the whole solution:
 
Next Steps To do:
-          Check for FJCore to allow JPEG export.
-          Check why is limited to 2047x2047 width and height
-          Define error handling (simple doesn’t capture exceptions).
-          Properly comment the code, based on the excellent info published by Andy and Tom.
 
 
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted on Sunday, July 12, 2009 9:15 PM |

Feedback

Gravatar

# re: Export Canvas to PNG and save it in your local folder

Excellent work!
7/16/2009 7:09 PM | Enrique Gonzalez
Gravatar

# re: Export Canvas to PNG and save it in your local folder

This was a life saver!
7/16/2009 7:26 PM | Victor Scott
Gravatar

# re: Export Canvas to PNG and save it in your local folder

YOU ARE GREAT :D
8/5/2009 4:02 PM | zeeshan
Gravatar

# re: Export Canvas to PNG and save it in your local folder

But when I use it in my application it gives me this error

"Cannot print images from other domains"
8/5/2009 8:25 PM | zeeshan
Gravatar

# re: Export Canvas to PNG and save it in your local folder

About the "Cannot Print Images from other domains", it a security restriction from SL to avoid exporting images that are copyrighted... you can implement a workaround and is to implement a service in your server that just grabs an image from the URL you need and serve it to your silverlight app (same domain trick ;-)). You can find more info about the trick in this URL:

http://silverlight.net/forums/p/105680/246875.aspx#246875
8/5/2009 9:55 PM | Braulio
Gravatar

# re: Export Canvas to PNG and save it in your local folder

I'm having an issue with the resolution being saved as 96 dpi instead of 72 dpi...any idea on how to resolve that or is it possible?
9/15/2009 10:44 PM | Liz Elizondo
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Hi,
I am the author of the imagetools library.

@Liz Elizondo
This is first a question of interpretation. An image is an image, the dpi will just be used for printing and normally not relavant for other tools like adobe photoshop or silverlight.

I had a look at the png specification and I found a chunk, where you can define the number of pixels per meter or the size of a pixel in meters. I can extend the png decoder if you want with a property to define the dpi, but this only counts for png files. You will have the same problem when saving as jpg, gif or bmp file.
9/17/2009 10:51 AM | Sebastian
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Hi,

The PNG file's color is a bit different from the original one.
I tried to save a lion picture to PNG, but the PNG file looks more lighter then the original one.
I tried the sample(Darkblue Rectangle and Gold Ellipse). It has the same problem, the result shows 'Blue Rectangle' and 'Yellow Ellipse'.
Could you please teach me how to resolve it?

Thanks a lot.
9/24/2009 12:30 PM | Tako
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Hi, I cannot see a problem there. I have started the demo by braulio and it works fine for me... Here is the screenshot that shows, that everything works as expected:

http://gpstudio.de/screenshots/ImageTools_Color_Comparison.png

I recommend to asks all question about image tools in the forum at the codeplex site: http://imagetools.codeplex.com
9/27/2009 10:33 AM | Sebastian
Gravatar

# re: Export Canvas to PNG and save it in your local folder

More info on the color changing:

http://imagetools.codeplex.com/Thread/View.aspx?ThreadId=68471

Maybe you won't need to go for the comment gamma line of code, probably the author has fixed it on a lter version.
1/27/2010 12:02 PM | Braulio
Gravatar

# re: Export Canvas to PNG and save it in your local folder

YOU ARE GREAT :D
6/7/2010 6:27 AM | caixw
Gravatar

# re: Error Exporting Canvas to PNG

When I set Canvas Width higher than 1840 I get an error message System.IndexOutOfRangeException from the ImageExportLib, why is it doing that? And what is the solution around that?
8/20/2010 3:09 AM | KnightChatX
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Gorgeous.. it made my life a lot easier :)) THANKS !
1/4/2011 6:00 PM | Dareen
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Excellent! Thanks!
3/8/2011 10:05 PM | J
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Hi,
Thank you for your reply. I completed my work using FJCore. Now i want to know how can i save the jpeg image without using savedialog . That is how can i specify a location in D: in which i want to save my jpeg. Please give me the code ..
Regards.
Devu
3/26/2011 6:37 PM | pick and pack
Gravatar

# re: Export Canvas to PNG and save it in your local folder

That was quick! I was about to send an update after I figured out it would only happen when a custom color was used, but you’re on top of it already. Downloaded, using it already :)

Thanks,
Sergei
3/28/2011 2:08 PM | diabetes mellitus symptoms
Gravatar

# re: Export Canvas to PNG and save it in your local folder

In view of the disadvantages of protectionism that are responsible for indigenous industries to be complacent and not progressive, consumer prices are still higher, and poor countries are denied access to markets and not follow the cycle deprivation, this issue should be discussed in appropriate platforms for good
4/3/2011 10:03 PM | Articles
Gravatar

# re: Export Canvas to PNG and save it in your local folder

I love Queen Latifa, she's a great actor, my cousin actually associated with it before when she was just starting out, she said she is everything nice electronic cigarette | electric cigarette
4/23/2011 11:59 AM | rao
Gravatar

# re: Export Canvas to PNG and save it in your local folder

Thanks a lot. It helped me very much..
Thanks again..
6/10/2011 11:57 AM | Vinod S
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: