svg - 画像リンク付きのSVGをPNG/JPEGに変換するにはどうすればよいですか？

Question

私はfabric.jscanvas要素に画像を追加して操作するために使用しています。最終結果を画像ファイル（JPEG / PNG）にエクスポートしたいのですが、運が悪かったので、いくつかの方法を試しました。

1つ目はHTML5canvas.toDataURLコールバックを使用することでした-機能しませんでした（明らかに、これはクロスオリジン画像では実行できません）。

次に、キャンバスをSVGにエクスポートして、convertユーティリティを使用しようとしました。

$ convert file.svg file.png

SVGは次のようになります。

<svg>
    ...
    <image xlink:href="http://example.com/images/image.png"
    style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: rgb(0,0,0); opacity: 1;"
    transform="translate(-160 -247.5)" width="320" height="495">
    </image>
    ...
</svg>

おそらく画像リンクのために、それも機能しませんでした。http://...image.png次に、リンクされた画像をダウンロードしてローカルに保存し、リンクをに置き換えてみました/path/to/image.png。運がない。

これを実現する方法はありますか？ありがとう。

---

アップデート

それ以来、ファブリックのノードモジュール（npm install fabric）を使用し、ファブリックのキャンバスのJSON表現（canvas.toJSON()ファブリック内）を使用して画像を生成することでこれを解決しました（キャンバスモジュールも使用します- npm install canvas）。

これを行う方法の簡単な例を次に示します。

// import the fabric module
var fabric = require('fabric').fabric,
    fs = require('fs');

// read the fabric json data as string
// (from file, db, etc)
var jsonString = readJSON(filepath);

// create canvas with specified dimensions
// (change to match your needs)
canvas = fabric.createCanvasForNode(100, 100);

// create output file to hold the png image
output = fs.createWriteStream("/tmp/image.png")

// load the json to the canvas and
// pipe the output to the png file
canvas.loadFromJSON(jsonString, function() {
  var stream = canvas.createPNGStream();
  stream.pipe(output)
});