☰

インライン SVG (DOM 内) をキャンバスに描画するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html canvas svg png
インライン SVG (DOM 内) をキャンバスに描画するにはどうすればいいですか? 質問する

さて、.svg ファイル/画像を .png ファイル/画像に変換する方法について助けが必要です...

ページに .svg 画像が表示されています。これはサーバー上に (.png ファイルとして) 保存されています。オンデマンドで (ボタンをクリックしたときに) これを .png ファイルに変換し、サーバー上に .png ファイルを保存する必要があります (.ajax リクエストを使用してこれを実行します)。

しかし、問題は変換です。

私は html5 Canvas について多くのことを読みました。これはおそらく今私がやらなければならないことを実行するのに役立つでしょうが、私の問題に対する明確な解決策を見つけることができません。そして、正直に言うと、私が見つけたすべてを理解しているわけではありません... そのため、私がそれを実行しなければならない方法について、明確なアドバイスや支援が必要です。

「html アイデア」テンプレートは次のとおりです。

<html>
    <body>
        <svg id="mySvg" width="300px" height="300px">
            <!-- my svg data -->
        </svg>
        <label id="button">Click to convert</label>
        <canvas id="myCanvas"></canvas>
    </body>
</html>

そしていくつかのjs:

<script>
    $("body").on("click","#button",function(){
        var svgText = $("#myViewer").outerHTML;
        var myCanvas = document.getElementById("canvas");
        var ctxt = myCanvas.getContext("2d");
    });
</script>

次に、SVG を Canvas に描画し、Base64 データを取得して、それをサーバーの .png ファイルに保存する必要があります... でも... どうやって? さまざまなソリューションについて読んだので、実際には... 迷っています... jsfiddle で作業していますが、実際には... どこにも行き着いていません...http://jsfiddle.net/xfh7nctk/6/...読んでくれてありがとう/助けてくれてありがとう

ベストアンサー1

インライン SVG の場合は、次の操作が必要です。

  • SVG文字列をBlob
  • BlobのURLを取得する
  • 画像要素を作成し、URLを次のように設定します。src
  • 読み込まれると（onload）キャンバス上にSVGを画像として描画できます
  • toDataURL()キャンバスから PNG ファイルを取得するために使用します。

例えば：

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});

もちろん、ここでの console.log は単なる例です。代わりにここに文字列を保存/転送します。(onerrorメソッド内にハンドラーを追加することもお勧めします)。

widthまた、およびheight属性を使用するか、または プロパティを使用して JavaScript からキャンバス サイズを設定することも忘れないでください。

おすすめ記事