Canvas イメージがドメインを越えるときに発生する問題と解決策の概要-H5 チュートリアル-php.cn

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

不言

リリース： 2018-09-17 16:04:01

オリジナル

6914 人が閲覧しました

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

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

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

#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 には互換性の問題があります。