2

How can i make users download the image generated with RaphaelJs? I would prefere if it was displayed on the HTML as an <img> so they could rightclick the image to save it to the desktop.

Sultanen
  • 3,084
  • 5
  • 25
  • 46
  • possible duplicate: http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser – hereandnow78 Jan 04 '13 at 21:58
  • I have seen that question. I have tried the canvg to get the RaphaelJs generated SVG onto a canvas but its just a part sucess. My image consists of 2 png images and 5 polygons, i only got one of the images onto the canvas with canvg?? – Sultanen Jan 05 '13 at 01:08
  • I tried to remove all of the polygons(raphael)/paths(svg) and now i get both the images on the canvas.. There is no support for paths in canvg? – Sultanen Jan 05 '13 at 01:19
  • I found what was causing my problems.. canvg doesent seem to support _'fill-opacity'_ i removed it from my polygons and not its working perfect! – Sultanen Jan 05 '13 at 01:27

1 Answers1

13

Here is a simple example of whats needed to convert RaphelJs to an image

The libarys needed are:

-

<script type="text/javascript" src="raphaeljs.js"></script>        
<script type="text/javascript" src="raphael.export.js"></script>        
<script type="text/javascript" src="canvg.js"></script>

   <script>

   window.onload = function(){

       //Start with a simple raphaelJs drawing
       var paper = new Raphael(document.getElementById('raphaelDiv'), 200, 200);
       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);


       //I had to use setTimeout to wait for the canvas to fully load before setting the img.src,
       //will probably not be needed for a simple drawing like this but i ended up with a blank image
       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);
   }

</script>

<!--The containers below are set to be invisible, we need them for the 
    conversion but we dont need to se them-->
<div id="raphaelDiv" style="display:none;"></div>
<canvas id="myCanvas" style="display:none;"></canvas>


<img id="myImg" src="">

Wola, you got your image! I hope this could be to good use for someone!

Sultanen
  • 3,084
  • 5
  • 25
  • 46