3

SVG イメージをラスター イメージに変換しようとしています。形式は問題ありませんが、png または jpg が適しています。

私はjSignatureを使用してこれを達成しようとしています。jSignature の API はクリックしませんが、署名を描画して<img src="data:" />タグに投稿できるようになりました。

私はこの問題について議論しているSOの他のスレッドを読んでいて、このアプローチを試みてきました。ただし、コンソールから「オブジェクト [オブジェクト オブジェクト] にはメソッド '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注意すべきもう 1 つの点は、要素を持っていないように見えることです。

于 2012-12-05T19:30:23.577 に答える