Home/ Questions/Q 8942479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:31:41+00:00

I have been trying to convert an SVG image to a raster image. The

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0