ホームページ >ウェブフロントエンド >H5 チュートリアル >Canvas イメージがドメインを越えるときに発生する問題と解決策の概要
この記事の内容は、クロスドメインのキャンバス画像で発生する問題と解決策をまとめたもので、困っている方の参考になれば幸いです。
CORS なしで Canvas を使用することもできます キャンバス内で画像を使用しますが、キャンバスが汚れます。キャンバスが汚染されると、そのデータを読み取ることができなくなります。たとえば、キャンバスの toBlob()、toDataURL()、または getImageData() メソッドを呼び出すと、セキュリティ エラーがスローされます。このメカニズムにより、リモート Web サイトの情報を許可なく取得することによって引き起こされるユーザーのプライバシーの漏洩を回避できます。
HTML 仕様の画像には、crossorigin 属性があり、適切な CORS 応答ヘッダーと組み合わせると、キャンバス内でクロスドメイン 要素の画像を使用できます。
同じドメイン | ドメイン間で CORS なし | ドメイン間で CORS | |
---|---|---|---|
サポートされる | サポートされるレンダリング、サポートされない | toDataURL
| サポートされるレンダリング、サポートされないtoDataURL
|
N/A | 同上 | サポートレンダリング、サポート | toDataURL
|
N/A | 上記と同じ | レンダリングをサポートしますが、 | はサポートしませんtoDataURL
|
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/FirefoxcrossOrigin が設定されていません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 には互換性の問題があります。
2. 同じドメインの画像を使用しないのはなぜですか?
現在のフロントエンド開発では通常、Alibaba Cloud や Tencent Cloud Services などの静的リソースが CDN 上に配置され、これらのリソースにアクセスするための専用のドメイン名が存在します。
以上がCanvas イメージがドメインを越えるときに発生する問題と解決策の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。