javascript - Fabric.js を使用してキャンバスを画像として保存する方法

Question

写真、テキスト、地図をキャンバスにロードできる Fabric.js プロトタイプがあります。完成したら、キャンバスを画像として保存できるようにしてほしいです。私は標準を使用してみました：

canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);

しかし、キャンバスはtainted-画像のせいだと思います（上記の方法は、テキストだけの場合に機能します）。エラーは次のとおりです。

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Fabric の組み込みメソッドを使用して、SVG として保存できます。

var canvasSVG = canvas.toSVG();
$('#canvasContainer').replaceWith(canvasSVG);

しかし、私はむしろPNG / JPGが欲しいです。何か案は？

キャンバスのシリアル化に関する Fabric.js のドキュメントを次に示します。

score 4 · Accepted Answer

次の条件が満たされている必要があります。

クロスドメイン<img>要素にはcrossorigin属性が含まれている必要があります。
画像をホストするサーバーは、応答で Access-Control-Allow-Origin ヘッダーを返し、ワイルドカードまたは特定のドメインを値として返す必要があります。
HTMLMediaElementブラウザは、特にでCORS をサポートする必要がありHTMLImageElementます。これは現在、Chrome、Firefox、および Opera 15 以降でのみ可能です。

score 2 · Accepted Answer

補足として、サーバーではなくローカルコンピューターで開発している場合は、おそらくこのセキュリティエラーメッセージが表示されることに注意してください。

4 に答える 4