Ability to save canvas as PNG

[GoogleCodeExporter]

After we will get to the point of linking to raster images, we should be
able to break the dependence of the linked images by saving in a raster
format. Other reasons why we would want to be able to save as PNG:

-some softwares do not understand the SVG type
-ability to make and manage server-side thumbnails
-feature relatively easy to implement. just include a pre-made library
-maybe better printing (untested)
-ability to share by email the preview of a creation without sharing the
source (of interest for designers)

see
http://www.nihilogic.dk/labs/canvas2image/

Original issue reported on code.google.com by Christia...@gmail.com on 10 Jul 2009 at 7:56

• Blocking: #236

[GoogleCodeExporter]

This would actually be two steps:  Convert the SVG image to a HTML canvas, then 
use
that library (or an equivalent) to convert to a raster.

Original comment by codedr...@gmail.com on 10 Jul 2009 at 9:22

• Added labels: NeededFor-Future, Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

I'm sorry. i was confused. we don't use a HTML canvas here. there is no easy 
way to
do this transformation to HTML canvas at the moment that I know of. you may 
close
this issue since it's not worth the effort at this point.

Original comment by Christia...@gmail.com on 10 Jul 2009 at 11:22

[GoogleCodeExporter]

I actually would like to keep this option open to explore other possibilities.  
I
know Opera allows this directly (right-click our SVG canvas, click Copy Image to
Clipboard).  It would be nice if all browsers supported such things.  Maybe it 
would
be good to raise some bugs against Mozilla and Webkit.

Original comment by codedr...@gmail.com on 11 Jul 2009 at 1:19

[GoogleCodeExporter]

Original comment by narendra.sisodiya on 20 Jul 2009 at 11:57

• Changed state: Accepted

[GoogleCodeExporter]

Apparently the Burst Engine supports importing of SVG into Canvas, and then you 
could
call toDataURL() to get the PNG.  Haven't tried it yet though.

Original comment by codedr...@gmail.com on 16 Oct 2009 at 5:06

[GoogleCodeExporter]

This morning I found out that Mozilla has an extension to Canvas' 2D context 
called
drawWindow():

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Cont
ent_Into_A_Canvas

This doesn't work in regular web pages, but is only allowed for code running 
with
Chrome privileges.

This means that the Firefox extension for SVG-edit could take a snapshot of the 
SVG,
stuff it into a canvas and then rasterize it as a PNG using toDataURL().

Original comment by codedr...@gmail.com on 16 Oct 2009 at 12:37

[GoogleCodeExporter]

How do they make the small thumbnails of webpages which appear when you hover a 
tab
name in the browsers?

Original comment by worms_...@yahoo.com on 16 Oct 2009 at 1:18

[GoogleCodeExporter]

Sorry I missed your comment wormsxulla, but I think the thumbnail code is 
internal to
the browsers, not something we can access.

Original comment by codedr...@gmail.com on 9 Jan 2010 at 10:55

[GoogleCodeExporter]

I think the user also wants to choose the size of the exported image. (by 
choosing
its resolution)
He may also want to export the page, the full drawing or only selected items.

For me, the .png should be generated server-side, then the user downlaod the
generated image.

Original comment by steren.g...@gmail.com on 27 Mar 2010 at 6:50

[GoogleCodeExporter]

Hi steren,

This should be possible today if you have a server-side script that will 
generate a
PNG out of a SVG (I think ImageMagick does this already).

Original comment by codedr...@gmail.com on 27 Mar 2010 at 7:43

[GoogleCodeExporter]

If you have imagemagick and also the imagick PHP-wrapper, you can do this. It 
will 
ensure the PNG is in RGB, and has full alpha transparency.

clearstatcache();
$imagickImage = new Imagick();
$imagickImage->setBackgroundColor(new ImagickPixel("transparent"));
$imagickImage->readImage(imagick_path($path_to_svg));  
$imagickImage->setImageFormat("png32");
$imagickImage->setImageDepth(8);
$imagickImage->setImageColorSpace(imagick::COLORSPACE_RGB);     
$imagickImage->setImageType(imagick::IMGTYPE_TRUECOLORMATTE);
$imagickImage->setOption("png:color-type","6");
clearstatcache();       
$imagickImage->writeImage(imagick_path($path_to_png));
$imagickImage->clear();
$imagickImage->destroy();

Original comment by adrianbj...@gmail.com on 27 Mar 2010 at 9:35

[GoogleCodeExporter]

Indeed, using somthing like ImageMagick was what I had in mind.

While many operations are done client-side, its inevitable that others will 
require
server computation (example: exporting, tracing, complex path 
transformations...)

The question is: What are the plans for server-side operations ?

Original comment by steren.g...@gmail.com on 28 Mar 2010 at 3:47

[GoogleCodeExporter]

Steren,

Personally, I have no plans to include server-side operations in SVG-edit, since
there's no way to serve these operations via Google Code.  I would prefer to let
people extend SVG-edit's functionality using their server-side code in any way 
they
want.  We provide the hooks to do this and that's what a lot of projects have 
already
done (wikis, CMSs, etc).  If there are additional client-side hooks we can 
create to
make server-side integration easier/better please let us know.

Original comment by codedr...@gmail.com on 28 Mar 2010 at 4:01

[GoogleCodeExporter]

Another library that recently came up is canvg: http://code.google.com/p/canvg/

This takes an SVG and outputs it as canvas.  I don't know how much SVG it 
supports
but if it supports all basic elements and gradients then we could take the SVG, 
stuff
it into a canvas, then output it as PNG.

Original comment by codedr...@gmail.com on 28 Mar 2010 at 4:08

[GoogleCodeExporter]

Heh, I was just about to post about CanVG too. :) Looks very promising! Indeed 
if it 
works properly, we could include the code in our project, but only have it 
downloaded/run when a "Save as PNG" option is selected.

Original comment by adeve...@gmail.com on 29 Mar 2010 at 2:23

[GoogleCodeExporter]

Yep - I already submitted two bugs (and patches) to the project and he merged 
them. 
I've also talked to him via email and he is aware of our project and would like 
to
target support for the SVG that SVG-edit can produce.

Original comment by codedr...@gmail.com on 29 Mar 2010 at 2:26

[GoogleCodeExporter]

Btw, you can browse to http://canvg.googlecode.com/svn/trunk/test.htm paste in 
some
SVG and click Render to see if it works.  If it doesn't, pare it down to a tiny 
test
case and then submit a bug :)

Original comment by codedr...@gmail.com on 29 Mar 2010 at 2:29

[GoogleCodeExporter]

If we can improve canvg enough, I think this could be do-able in the 2.6 
timeframe.

Original comment by codedr...@gmail.com on 29 Mar 2010 at 3:35

• Added labels: NeededFor-2.6
• Removed labels: NeededFor-Future

[GoogleCodeExporter]

Note that canvg might be at a stage where we can start trying to use it in 
SVG-edit.
 Does anyone want to try and integrate it?  We might be able to slip it into SVG-edit
2.5 if the quality is high enough.

Also, does anyone have any suggestions on the UI for it?  Export as PNG in the 
main menu?

Original comment by codedr...@gmail.com on 12 Apr 2010 at 7:36

[GoogleCodeExporter]

Basically implemented in r1521 using the canvg library, as suggested by 
codedread. 
Some improvements are still possible, but I think I'll go ahead and close the 
issue.

Original comment by adeve...@gmail.com on 14 Apr 2010 at 6:33

• Changed state: Fixed
• Added labels: NeededFor-2.5
• Removed labels: NeededFor-2.6

[GoogleCodeExporter]

is there any way that we can save image drawn in html5 canvas as svg, other 
other than as an png image. i can save image as png but want to save it as svg 
also .

Original comment by nitesh...@gmail.com on 26 Sep 2010 at 6:43