3

我一直在尝试将 SVG 图像转换为光栅图像。格式无关紧要，不过 png 或 jpg 会很好。

我正在使用jSignature来尝试完成此操作。jSignature 的 API 没有为我点击，但我可以绘制签名并将其发布到<img src="data:" />标签中。

我一直在阅读关于 SO 讨论这个问题的其他线程，并且我一直在尝试这种方法。但是，我不断从控制台收到“Object [object Object] has no method 'getContext'”错误。

我将使用 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>

任何帮助、建议或提示将不胜感激！谢谢！

4

2 回答 2

2

我已经想通了！

Canvg允许您将 svg 绘制到画布上。我在我的页面上制作了一个隐藏的画布元素。我将我的 jSignature 保存为 SVG/XML 字符串，将其传递给 canvg 进行渲染，然后最后利用隐藏画布的 .toDataURL() 方法。

 <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>
于 2012-12-06T19:38:36.693 回答
0

这段代码：

$("canvas")

返回一个 jQuery 对象（甚至可能是一个 jQuery 对象列表），jQuery 对象没有getContext()方法。尝试做这样的事情来获得一个实际的canvas元素：

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

另一件需要注意的事情：您似乎没有canvas元素。

于 2012-12-05T19:30:23.577 回答