Trying to convert SVG signature to Raster image

Question

I have been trying to convert an SVG image to a raster image. The format doesn't matter, png or jpg would be nice though.

I am using jSignature to try an accomplish this. The API for jSignature isn't clicking for me but I am at the point where I can draw a signature and post it into an <img src="data:" /> tag.

I have been reading other threads on SO discussing this issue and I have been trying this approach. However, I keep getting "Object [object Object] has no method 'getContext' " errors from my console.

I will be passing this to a database using PHP.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="sigStyle.css">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jSignature.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        var sigdiv = $("#signature").jSignature({'UndoButton':true});

        $("#lock").click(function(){
          //Lock the canvas, stop user input
        });

        $("#save").click(function(){
          var datapair = sigdiv.jSignature("getData", "svgbase64");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $(i).appendTo($("#outputSvg"));
        });

        $("#clear").click(function(){
          sigdiv.jSignature("reset");
          $("#outputSvg, #outputRaster").empty();
        });

        $("#raster").click(function(){
          var canvas = $("canvas").getContext("2d");
          var img = canvas.toDataURL("image/png");
          $("#outputRaster").append('<img src="'+img+'"/>');
        });
      })
    </script>
  </head>  
  <body>

    <div id="signature"></div>
    <br />
    <button id="lock">Lock</button>
    <button id="save">Save</button>
    <button id="clear">Clear</button>
    <button id="raster">Raster</button>
    <br /><br />
    <fieldset id="outputSvg" style="float:left">
      <legend>SVG</legend>
    </fieldset>
    <fieldset id="outputRaster" style="float:left">
      <legend>Raster</legend>
    </fieldset>
  </body>
</html>

Any help, advice or tips would be greatly appreciated! Thanks!

score 2 · Accepted Answer · answered Dec 06 '12 at 19:38

I have figured it out!

Canvg allows you to draw an svg to a canvas. I made a hidden canvas element on my page. I save my jSignature as an SVG/XML string, pass it to canvg to render, then finally utilize the hidden canvas's .toDataURL() method.

 <head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jSignature.min.js"></script>
    <script type="text/javascript" src="canvg.js"></script>
    <script>
     $(document).ready(function(){
        var sigdiv = $("#signature").jSignature({'UndoButton':true});

        $("#save").click(function(){
          var datapair = sigdiv.jSignature("getData", "svg");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $(i).appendTo($("#outputSvg"));

          var canvas = document.getElementById("canvas");

          canvg(canvas, datapair[1]);

          var img = canvas.toDataURL("image/png");
          $("#outputRaster").append("<img src='"+img+"'/>");
        });
      });
    </script>
  </head>  
  <body>
    <div id="signature"></div>
    <canvas id="canvas" hidden="hidden"></canvas>
    <br />
    <button id="lock">Lock</button>
    <button id="save">Save</button>
    <button id="clear">Clear</button>
    <button id="raster">Raster</button>
    <br /><br />
    <fieldset id="outputSvg" style="float:left">
      <legend>SVG</legend>
    </fieldset>
    <fieldset id="outputRaster" style="float:left">
      <legend>Raster</legend>
    </fieldset>
  </body>
</html>

score 0 · Answer 2 · answered Dec 05 '12 at 19:30

0

This code:

$("canvas")

Returns a jQuery object (possibly even a list of jQuery objects), jQuery objects don't have a getContext() method. Try doing something like this to get an actual canvas element:

$("canvas")[0].getContext("2d")

Another thing to note: you do not appear to have a canvas element.

answered Dec 05 '12 at 19:30

robertc

74,533
18
193
177

It's there. As I mentioned in my first post, I am using jSignature. $("#signature").jSignature({'UndoButton':true}); adds a canvas inside that div. I was fiddling around adding a class to the element with jquery ($("canvas")) and that seemed to work fine. Thank you though, I will get back to you if this helps or not! – FunkyMonk91 Dec 05 '12 at 19:47
@FunkyMonk91 jQuery objects have methods for adding classes, it doesn't have element specific DOM methods. – robertc Dec 05 '12 at 22:31
Good to know. Still figuring all this out. Thanks! – FunkyMonk91 Dec 06 '12 at 14:37

Trying to convert SVG signature to Raster image

2 Answers2