Onload と CORS に関する CanvasContext2DdrawImage() の問題を解決する方法

CanvasContext2DdrawImage() 問題: Onload と CORS

dataURL を取得する前に画像をキャンバスに描画しようとすると、返された情報が不足しているか、埋め込まれているように見える場合があります。多数の「A」文字が含まれています。この問題は、画像をキャンバスにペイントする前に、画像の読み込みが完了するまで待機する必要があるために発生します。これを修正するには、画像要素の読み込みイベント ハンドラーを利用します。

この問題に対処するには、次の手順を実行します:

1. 画像の読み込みを待機します: image 要素の onload イベント ハンドラーを含めます。この関数は、画像が完全に読み込まれると実行されます。
2. キャンバスに画像を描画: onload ハンドラー内でキャンバスを作成し、drawImage メソッドを使用してその上に画像を描画します。
3. DataURL を取得します: 画像を描画した後、toDataURL を使用してdataURL.

潜在的な障害は CORS (Cross-Origin Resource Sharing) に関連しています。 context.toDataURL() と context.getImageData がシームレスに動作するには、クロスオリジン互換性のある方法で画像リソースを取得する必要があります。そうしないと、キャンバスが「汚染されている」とマークされ、ピクセル データにアクセスできなくなります。これを回避するには、次のガイドラインに従ってください:

1. 同一生成元イメージ: 同じサーバーからのイメージは問題ありません。
2. 外部イメージ- Cross-Origin Header: 画像をホストしている外部サーバーのヘッダーで CORS が有効になっていることを確認します。さらに、img.crossOrigin を「use-credentials」に設定します。
3. 外部画像 - 匿名リクエスト: サーバーが匿名リクエストを許可する場合は、img.crossOrigin を「anonymous」に設定します。

CORS ヘッダーはサーバーから発信されることに注意することが重要です。クロスオリジン属性は、データ取得に CORS を利用する意図を示すだけです。サーバーが正しく構成されていない場合、回避策はありません。

混合ソース (独自のサーバーと CORS 準拠のサーバー) からの画像が関係するまれなケースでは、onerror イベント ハンドラーの使用を検討してください。このハンドラーは、非 CORS サーバーでクロスオリジン属性が「匿名」に設定されている場合にアクティブ化されます。

以上がOnload と CORS に関する CanvasContext2DdrawImage() の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。