knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

Canvasでの認証エラー

toDataURL, getImageDataなど、Canvasで画像のピクセルデータを取得したり保持しているピクセルデータを出力する際、画像を格納しているディレクトリにBASIC認証がかかっていると認証エラーを起こします。

その際はCanvasで操作するimageオブジェクトにcrossorigin 属性を指定します。

(変数imageには画像のパスを与えられたimageオブジェクトが格納されているとします)

image.crssorigin = "use-credentials";

基本的には同一ドメイン間での画像の操作を前提としているため、このような一手間が必要になるそうです。

ちなみに単純に別ドメインの画像を操作する際は以下で可能になります。

image.crssorigin = "annonymus";

この属性についての詳細は下記をご参照ください。

reference.hyper-text.org