1

キャンバスを Web ページからファイルに保存しようとしています。キャンバスはかなり複雑で、いくつかの画像 (いくつかの半透明の .png ファイル、2 つの svg 要素、および 4 つの他のキャンバス) から構築されており、どのように保存しようとしても、canvas.toDataURL()メソッドまたはdomtoimage [ライブラリ]を使用しています。 ( https://github.com/tsayen/dom-to-image ) またはcanvas2imageまたはfileSaverまたはcanvasToBlobライブラリ - 結果は同じです: svg (および<image>内部の要素) パーツのない画像。そのため、キャンバスから構築されたパーツのみを取得しています。「汚染された」キャンバスについて読みましたが、画像ホスト サーバーは Web ページと同じです。

さらに、RCMをクリックして「名前を付けて画像を保存」機能を選択してキャンバスを保存すると、必要なもの、つまり全体像が保存されるため、混乱します。

コード全体が巨大で、保存オプションが異なるため、ここでは保存オプションを 1 つだけ示します。

domtoimage.toBlob(canvasElement)
  .then(function (blob) {
    console.log(blob);
    window.saveAs(blob, 'my-node.png');
  });

左側の画像は、ブラウザで「画像を保存」機能を使用したときに得られるもので、右側はtoBlobを介して js によって保存された画像です。

ここに画像の説明を入力ここに画像の説明を入力

画像全体を自動的に保存する方法について何か提案をいただければ幸いです :)

4

1 に答える 1

1

あなたの編集の機会を利用して、これを実際の回答として投稿します.

そのため、export メソッドを呼び出したときにすべての画像がロード/描画されなかったために、これらの画像が出力に含まれていなかったことが問題でした。

canvg関数とそのショートカットはctx.drawSvg、非同期にすることができます。通常、シェイプのみがレンダリングされている場合はそうではありませんが、ここでは SVGImage ( <image>) 要素にラップされた外部コンテンツをロードしているため、同期することはできません。

ただし、renderCallbackcanvg 呼び出しに追加できるオプションがあります。を使用しctx.drawSVG、このメソッドには元の と比較していくつかの追加パラメーター (dx、dy、dwidth、dheight)があるため、次のcanvgように呼び出す必要があります。

ctx.drawSvg(yourSVGMarkup, 0, 0, null, null, {renderCallback: yourCallbackFunction}); 


var str = new XMLSerializer().serializeToString(document.querySelector('svg'));
canvas.getContext('2d').drawSvg(str, 0, 0, null, null, {
  renderCallback: function() {
    console.log('done');
  }
});
console.log('doing');
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.js"></script>
<svg width="300" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="100" width="100" />
</svg>
<canvas id="canvas"></canvas>

于 2016-12-17T11:36:24.800 に答える