異なるサーバーから画像をロードすると、canvas.toDataURL() がセキュリティ例外をスローするのはなぜですか?

Canvas toDataURL() のクロスオリジンの問題

十分な休息を確保しているにもかかわらず、ユーザーが Canvas.toDataURL() を使用するときにセキュリティ例外が発生する可能性があります。 。次のコードを考えてみましょう:

<code class="javascript">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)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}</code>

このコードは、別のサーバーからの画像を新しいウィンドウで Base64 データとして開こうとしますが、SECURITY_ERR 例外が発生します。

仕様によるとの場合、キャンバス要素の toDataURL() メソッドは、origin-clean フラグが false に設定されている場合、SECURITY_ERR 例外をスローします。画像が別のサーバーからロードされると、キャンバスは汚染され、その元のクリーン フラグが false に設定されます。

したがって、toDataURL() を直接使用して、ソース元の画像の Base64 データを取得することはできません。異なるサーバー。クロスオリジン画像を処理するには、CORS やプロキシなどの代替技術が必要になる場合があります。

以上が異なるサーバーから画像をロードすると、canvas.toDataURL() がセキュリティ例外をスローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。