Canvas クロスドメイン ソリューションの概要

この記事では、Canvas クロスドメイン ソリューションについて説明します。必要な方は参考にしていただければ幸いです。

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

まずは実装方法を見てみましょう。

実装方法

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

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

キャンバス コンテキストを取得します--ctx

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

Drawing

画像上のコンテンツを無視し、直接描画するには、drawImage を使用します。キャンバス上に描画するだけです。

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

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

画像データの取得

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

canvas.toBlob(blob => {
    // 你要的 blob
}, mimeType, encoderOptions)

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

キャンバス クロスドメイン

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

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

または

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

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

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

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

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

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

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

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

以上がCanvas クロスドメイン ソリューションの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。