Canvas イメージがドメインを越えるときに発生する問題と解決策の概要

この記事の内容は、クロスドメインのキャンバス画像で発生する問題と解決策をまとめたもので、困っている方の参考になれば幸いです。

CORS なしで Canvas を使用することもできます キャンバス内で画像を使用しますが、キャンバスが汚れます。キャンバスが汚染されると、そのデータを読み取ることができなくなります。たとえば、キャンバスの toBlob()、toDataURL()、または getImageData() メソッドを呼び出すと、セキュリティ エラーがスローされます。このメカニズムにより、リモート Web サイトの情報を許可なく取得することによって引き起こされるユーザーのプライバシーの漏洩を回避できます。

HTML 仕様の画像には、crossorigin 属性があり、適切な CORS 応答ヘッダーと組み合わせると、キャンバス内でクロスドメイン 要素の画像を使用できます。

#crossOrigin/CORS同じドメインドメイン間で CORS なしドメイン間で CORS defaultサポートされる サポートされるレンダリング、サポートされない サポートされるレンダリング、サポートされないanonymoustoDataURL use-credentials はサポートしませんtoDataURL概要: Canvas はクロスドメイン画像を通常どおりレンダリングできますが、クロスドメイン画像がクロスドメイン応答ヘッダーを設定しないか、設定しない場合は、 crossOrigin = 'anonymous'、canvas.toDataURl を使用すると、次のエラーがスローされます:

		toDataURL	toDataURL
N/A	同上	サポートレンダリング、サポート
N/A	上記と同じ	レンダリングをサポートしますが、

Chrome

crossOrigin is not set

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Image.img.onload...

Cross-domain

Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

crossOrigin=use-credentials## が設定されています #

Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

Safari/Firefox

crossOrigin が設定されていません

SecurityError: 操作は安全ではありません。

クロスドメイン

[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

corssOrigin=use が設定されています -credentials

[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
[Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

テスト例

1. サーバーを起動します

npm start:サーバーを起動します

npm run start:corsdisable：クロスドメイン イメージ サーバーを起動します

npm run start:corsable：クロスドメイン CORS イメージ サーバーを起動します

##2。 http://localhost:3000 にアクセスします。

その他の質問

1. cossOrigin には互換性の問題があります。

cossOrigin をサポートしていないブラウザの場合 (IE 10 以下はサポートされていません。Android 4.3 以下はサポートされていません)サポートされています) 互換性のために XMLHttprequest と URL.createObjectURL() を使用できます。テスト例を参照してください。Ajax は Canvas イメージのクロスドメイン問題を解決します。

2. 同じドメインの画像を使用しないのはなぜですか?

現在のフロントエンド開発では通常、Alibaba Cloud や Tencent Cloud Services などの静的リソースが CDN 上に配置され、これらのリソースにアクセスするための専用のドメイン名が存在します。

以上がCanvas イメージがドメインを越えるときに発生する問題と解決策の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。