異なるオリジンから画像を描画するときに「canvas.toDataURL()」が「SECURITY_ERR」をスローするのはなぜですか?

'canvas.toDataURL()' のセキュリティ例外を理解する

次のコードを考えてみましょう:

<pre class="brush:php;toolbar:false">
var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

このコードは、「toDataURL()」メソッドを使用して、キャンバス要素をデータ URL に変換しようとします。ただし、これにより「SECURITY_ERR: DOM Exception 18」エラーが発生します。

このエラーの原因は、Web ブラウザーによって課されるセキュリティ制限にあります。 HTML Canvas の仕様によれば、キャンバスに描画されている画像が別のソース (この場合は「http://www.ansearch.com」) から提供されている場合、ブラウザはキャンバスを次の形式に変換できません。データ URL。これは、クロスオリジンのデータ アクセスと潜在的なセキュリティ脆弱性を防ぐために行われます。

したがって、異なるオリジンの画像を含むキャンバス要素からデータ URL を生成しようとすると、このセキュリティに遭遇することになります。例外。この問題を解決するには、画像が Web アプリケーションと同じオリジンから提供されていることを確認するか、画像変換の代替方法を検討する必要があります。

以上が異なるオリジンから画像を描画するときに「canvas.toDataURL()」が「SECURITY_ERR」をスローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。