キャンバス・クロスドメイン・デピットの実践の説明

Canvasのクロスドメイン問題を解決するには？ここでは、Canvasで描画する際に発生したクロスドメインの問題と解決策を紹介します。

まず、実装を見てみましょう。

実装方法

ターゲット画像は、通常、画像＋テキストで構成されます。奇妙な大きさの画像でも、予測不可能な種類のテキストでも、canvas api の drawImage と fillText メソッドを使用することで実現可能です。

基本的な流れは以下の通りです。

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

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

2. 図面

画像上のコンテンツは無視し、drawImage で直接 canvas に描画します。

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // Here we call with the following parameters
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage パラメータを使用する方法は3つあります。 MDNドキュメント .

3. 画像データの取得

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

canvas.toBlob(blob => {
    // the blob you want
}, mimeType, encoderOptions)

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

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

通常、描画された画像を出力する必要がある場合、canvasの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 に変更してもらうか、代わりに同じドメインのリソースを使用してみてください（考えてみてください）... .

次に、ケース1に取り組みましょう。

img.crossOrigin = 'Anonymous'

ユーザーのプライバシーを侵害する可能性のあるリモートサイトからの情報の不正な取得（GPS情報、Exifの検索など）を避けるため、canvas上でtoBlob(), toDataURL(), getImageData() を呼び出すとセキュリティエラーがスローされます。

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

画像サービスがクロスドメインでの使用を許可している場合（許可していない場合は上記を参照）、img 要素に crossOrigin 属性を追加することを検討する必要があります。

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

というわけで、画像データを取得することができます。うまくいかない場合は、同じドメインのリソースに切り替えて〜。

今回の記事は以上です。皆さんの勉強のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。