Convert Raphael canvas inside div to PNG

Question

I've created an SVG using Raphael that I want to capture and convert to PNG and then display in the open window. I have looked at some other stack overflow answers like this one. I implemented ollieg's answer to that question. Here's an example of what I'm doing:

<html>
    <head>
        <script src="NBA_test/lib/raphael-min.js"></script>
    </head>
    <body>

    <div id="canvas"></div><br>

    <script language="JavaScript">
    var test=Raphael("canvas",50,50);
    var rect=test.rect(0,0,50,50);
    rect.attr({fill: '#fff000'})

    window.onload = function() {
        var canvas = document.getElementById("canvas");
        window.location = canvas.toDataURL("image/png");
    }

    </script>
    </body>
</html>

This should draw a yellow rectangle and output it as a png. The console confirms that the SVG is being captured correctly in the canvas var. However, the toDataURL line throws an error: "TypeError: 'null' is not an object (evaluating 'canvas.toDataURL')" I know my example is a little different in the sense that I don't have an actual canvas tag in my html, just the div that is going to get the canvas. Given that the canvas is being captured correctly, however, I don't understand why the second line throws that error.

toDataUrl is only for the html5 canvas element, its not going to work that way for Raphael try whats suggested here http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser — Loktar, Jun 24 '14 at 14:34
Are you talking about the first answer on that question? Step 2 of that answer is exactly what I've done here. Still seems to rely on toDataURL. It's not clear to me how I would use canvg in this situation. — AustinC, Jun 24 '14 at 14:51
Yeah they use [this library](https://code.google.com/p/canvg/) to render the svg to canvas, and *then* call `toDataUrl` on it. So basically you have to first convert your svg, draw it onto the canvas element, then call `toDataUrl`. — Loktar, Jun 24 '14 at 14:56
Alright so I added a canvas element, let's call it canvas_html, and then put this into my onload, after loading the svg into the var canvas: canvg('html_canvas',canvas). Shouldn't this load that SVG code into the html canvas? I get an error: "TypeError: 'undefined' is not a function (evaluating 's.substr(0,1)')" — AustinC, Jun 24 '14 at 15:25

score 0 · Accepted Answer · answered Jun 24 '14 at 19:04

Using canvg per the suggestion above and raphael.export.js, I have solved my problem (kind of). My minimal example now works as below:

<html>
    <head>
        <script src="lib/raphael-min.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
        <script src="lib/raphael.export.js"></script>
    </head>
    <body>

    <div id="raph_canvas"></div><br> 
    <canvas id="html_canvas" width="50px" height="50px"></canvas>

    <script language="JavaScript">
    var test=Raphael("raph_canvas",50,50);
    var rect=test.rect(0,0,50,50);
    rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1})

    window.onload = function() {
        var canvas_svg = test.toSVG();
        canvg('html_canvas',canvas_svg);
        var canvas_html = document.getElementById("html_canvas");
        window.location = canvas_html.toDataURL("image/png");
    }

    </script>
    </body>
</html>

The problem now is that my actual app, which is a little more complex, doesn't work, but I will maybe post a separate question about that.

Convert Raphael canvas inside div to PNG

1 Answers1