Canvas クロスドメインエスケープ演習の詳細な説明

Canvas のクロスドメイン問題を解決するには?ここでは、Canvas を使用した描画中に遭遇したクロスドメインの問題と解決策を記録します。

まずは実装方法から見ていきましょう。

対象となる画像は通常、画像＋文字で構成されます。さまざまなサイズの画像であっても、予測不可能なテキストであっても、キャンバス API のdrawImage メソッドと fillText メソッドを使用して実現できます。

基本的なプロセスは次のとおりです。

1. キャンバス コンテキストの取得 --ctx

 const Canvas = document.querySelector(selector)const ctx = Canvas.getContext('2d')

2. 描画

画像上の内容を無視し、drawImage を直接使用してキャンバス上に描画します。

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // ここでは、次のパラメータを使用して this.ctx.drawImage(image, dx, dy, dWidth, dHeight) を呼び出します) この .ctx.restore()}

drawImage にはパラメータを使用する 3 つの方法があります。具体的な使用方法については、MDN ドキュメントを確認してください。

3. 画像データの取得

HTMLCanvasElement DOM オブジェクトによって提供される toBlob()、toDataURL()、または getImageData() メソッドを呼び出すだけです。

 Canvas.toBlob(blob => { // 必要な BLOB}, mimeType, encoderOptions)

ここでの mimeType のデフォルト値は image/png です。 encoderOptions は画質を指定し、圧縮に使用できますが、mimeType 形式は image/jpeg または image/webp である必要があります。

通常の状況では、描画されたイメージを出力する必要がある場合、キャンバスの toBlob()、toDataURL()、または getImageData() メソッドを呼び出してイメージ データを取得できます。ただし、クロスドメインの画像に遭遇すると、少し恥ずかしいです。次のエラーが報告される場合があります。

「HTMLCanvasElement」で「toBlob」の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性があります。

または

オリジン「https://your.website」から「https://your.image.src」の画像へのアクセスが CORS ポリシーによってブロックされました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。

まず 2 番目の状況を見てみましょう。

アクセス制御許可オリジン

ドメイン間で特定の画像リソースを使用し、サービスが Access-Control-Allow-Origin ヘッダーに正しく応答しない場合、次のエラー メッセージが報告されます。

オリジン「https://your.website」から「https://your.image.src」の画像へのアクセスが CORS ポリシーによってブロックされました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。

これは、クロスドメイン アクセスが許可されていないことを意味します。その場合は、バックグラウンドで Access-Control-Allow-Origin の値を * または your.website に変更させるか、代わりに同じドメイン リソースを使用してみることができます (考えてみてください)。 。

次に、最初の状況を解決しましょう。

 img.crossOrigin = '匿名'

リモート Web サイトの情報 (GPS やその他の情報など、詳細については Exif を検索してください) を許可なく取得することによって引き起こされるユーザーのプライバシーの漏洩を避けるために、toBlob()、toDataURL()、または getImageData() を呼び出すときにセキュリティ エラーがスローされます。キャンバスの:

「HTMLCanvasElement」で「toBlob」の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性があります。

イメージ サービスでクロスオリジンの使用が許可されている場合 (許可されていない場合は、前の記事を参照)、img 要素にcrossOrigin 属性を追加することを検討する必要があります。

 const image = new Image()image.crossOrigin = 'Anonymous'image.src = src

このようにして画像データを取得することができます。見つからない場合は、同じドメインのリソースを使用してください~

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。