キャンバスに画像を描くことができるページに取り組んでいます。画像には 6 つのオプションがあります。完成したら、作成したものを保存できるようにしてほしいと思います。
drawImageキャンバスに画像を描画するために使用していますが、次のコードを使用すると :
var canvas = document.getElementById("canvas");
window.open(canvas.toDataURL("image/png"));
描画された画像を画像に表示しませんDataUrl。
キャンバスに描画された画像が で指定された画像にも表示されるようにするにはどうすればよいtoDataURLですか?
あなたのページとあなたが描いている画像の URL は何ですか?
画像がページと同じオリジンから来ていない場合、toDataURLまたは他の方法を使用してキャンバスのコンテンツを読み取ることはできません。これは意図的なセキュリティ機能です。JavaScript エラー コンソールを確認すると、「DOM ERROR」や「SECURITY EXCEPTION」などのメッセージが表示される場合があります。
どういう意味ですか？つまり、ページがある URL (例: 、test.com、localhost:8080)file:///home/foo/にあり、描画している画像が異なるオリジン (google.comは とは異なるオリジンtest.com、localhost:3000は とは異なるオリジン) の URL にある場合localhost:8080、一部のブラウザfile:///は URL をあたかもそうであるかのように扱います。常に別のオリジンから）、画像をキャンバスに描画すると、ブラウザーはキャンバスを読み取り不能としてマークします。
なぜこのようになっているのですか？ページは他のオリジンからの画像を表示できますが、明示的に許可されていない限り、他の多くの形式のクロスオリジン アクセスは拒否されXMLHttpRequestます。
fileURL は、より悪用される可能性があるため、別の方法で扱われます。ページと画像にローカル ファイルを使用している場合は、代わりに単純な Web サーバーでそれらを提供します。
このセクションの最初の箇条書きが適用されます。