ホームページ > 記事 > ウェブフロントエンド > 異なるサーバーから画像をロードすると、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 サイトの他の関連記事を参照してください。