「canvas.toDataURL()」 がクロスオリジン画像でセキュリティ例外をスローするのはなぜですか?

クロスオリジン画像の取得中に Canvas.toDataURL() がセキュリティ例外をトリガーするのはなぜですか?

Canvas.toDataURL( ) クロスオリジン ソースから取得した画像を含む HTML5 キャンバス要素上で、「SECURITY_ERR: DOM Exception 18」エラーが発生する場合があります。これは、Web ブラウザによって課されるセキュリティ制限が原因で発生します。

HTML5 仕様によれば、toDataURL() メソッドは、「origin-clean」フラグが false のキャンバス要素で呼び出された場合に SECURITY_ERR 例外をスローします。 Canvas 要素に、それが存在するドキュメントと同じ生成元のリソースのみが含まれている場合、このフラグは true に設定されます。あなたの場合、画像は別のドメインから発信されているため、「origin-clean」フラグは false に設定されています。

回避策:

残念ながら、これらのセキュリティ制約があるため、toDataURL() を使用してクロスオリジン画像の PNG 表現を取得することはできません。この問題を解決するには、次のオプションを検討してください:

• CORS 対応プロキシを使用する: Cross-Origin Resource Sharing (CORS) を有効にするサーバー側プロキシを設定します。これにより、クロスオリジン リクエストを作成し、セキュリティ制限を回避できます。
• HTML5 ファイル API を使用します: toDataURL() を使用する代わりに、ファイル API を利用して、ファイル オブジェクトを作成します。キャンバス。これにより、CORS に依存せずに画像をファイルとして保存できます。
• サードパーティ サービスの使用: クロスオリジン画像取得機能を提供するサードパーティ サービス (crossOrigin など) を確認します。 .me.

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