SVG 서명을 래스터 이미지로 변환하려고 시도했습니다.

SVG 이미지를 래스터 이미지로 변환하려고했습니다. 형식은 중요하지 않지만 PNG 또는 JPG는 좋을 것입니다.SVG 서명을 래스터 이미지로 변환하려고 시도했습니다.

나는 이것을 달성하기 위해 jSignature을 사용하고 있습니다. jSignature 용 API는 나를 클릭하지는 않지만 서명을 그리고 <img src="data:" /> 태그에 게시 할 수있는 지점에 있습니다.

나는이 문제를 논의하는 다른 스레드를 읽었으므로 노력해 왔습니다. this approach. 그러나 계속 "개체 [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 서명을 래스터 이미지로 변환하려고 시도했습니다.

답변

관련 문제