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

Canvas.toDataURL() のセキュリティ例外の調査

イメージ視覚エフェクトの作成中に、canvas を呼び出すときに予期しないセキュリティ例外が発生する場合があります。 toDataURL()。このエラーの背後にある理由を詳しく調べて、それに対処する解決策を検討してみましょう。

提供されたコードのコンテキストでは、別のサーバーからロードされた画像に対して toDataURL() を使用しようとすると、問題が発生します。 http://www.ansearch.com/images。 W3C 仕様に従って、セキュリティ上の懸念により、この操作は許可されていません。

toDataURL() メソッドは、canvas 要素のコンテンツをデータ URL または画像文字列に変換するように設計されています。ただし、キャンバスにクロスオリジン ソースからの画像が含まれている場合、そのデータにアクセスすると同一オリジン ポリシーに違反し、セキュリティ リスクが生じます。

これを防ぐために、ブラウザは「オリジン クリーン」フラグを強制します。キャンバス要素上で。キャンバスにクロスオリジン画像が含まれている場合、フラグは false に設定され、toDataURL() を呼び出すと SECURITY_ERR 例外がスローされます。

残念ながら、画像が別のサーバーからのものである場合、直接使用することはできません。 toDataURL() を使用してデータを取得します。 CORS (Cross-Origin Resource Sharing) を使用してクロスオリジン リクエストを処理するなど、代替アプローチを検討してください。

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