试图将SVG签名转换为光栅图像

我一直在尝试将SVG图像转换为光栅图像。格式并不重要，但PNG或JPG会很好。试图将SVG签名转换为光栅图像

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

我一直在阅读SO上的其他线程讨论这个问题，我一直在尝试this approach.但是，我一直从我的控制台得到“Object [object Object]没有方法'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>

任何帮助，意见或建议将不胜感激！谢谢！

来源

2012-12-05 FunkyMonk91

我已经想通了！

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-06 19:38:36 FunkyMonk91

此代码：

$("canvas")

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

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

另一件事要注意：您不似乎有canvas元素。

来源

2012-12-05 19:30:23 robertc

它在那里。正如我在第一篇文章中提到的，我正在使用jSignature。（“＃signature”）。jSignature（{'UndoButton'：true}）;在该div内添加一个画布。我正在用jquery（$（“canvas”））向元素添加一个类，并且这似乎工作正常。谢谢，但如果这有帮助，我会尽快回复您！ – FunkyMonk91

@ FunkyMonk91 jQuery对象有添加类的方法，它没有特定于元素的DOM方法。 – robertc

很高兴知道。还在搞清楚这一切。谢谢！ – FunkyMonk91

试图将SVG签名转换为光栅图像

回答

相关问题