Raphael Export to PNG

1.2k Views Asked by At

I have the following code:

http://jsfiddle.net/JQPurfect/mkz4s9j3/29/

     $("#editor_save").click(function() {
           var paper = new Raphael(document.getElementById('raphaelDiv'), 200, 200);

          // circle is for testing but I need svg_paper as the canvas object
           var circle = paper.circle(50, 40, 10);
           circle.attr("fill", "#f00");
           circle.attr("stroke", "#fff");
           var circle2 = paper.circle(70, 60, 50);

           //Use raphael.export to fetch the SVG from the paper
           var svg = paper.toSVG();

           //Use canvg to draw the SVG onto the empty canvas
           canvg(document.getElementById('myCanvas'), svg);

           setTimeout(function() {
               //fetch the dataURL from the canvas and set it as src on the image
               var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
               document.getElementById('myImg').src = dataURL;
           }, 100);


    });

However I need to save the svg_paper to png but can't fig it out. The idea is to draw freehand on svg_paper and save that as an image once click "save" button.

Can you update the fiddle with it?

Thanks.

0

There are 0 best solutions below