Image読み込み時のCORS対応

[Kazunori Sato]

obnizのCanvasに表示する画像を外部サイトからImageオブジェクトに読み込もうとすると、CORSのエラーが発生します。

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

これを回避するにはどうすればいいでしょうか？　リポジトリAPIを使い画像ファイルをobnizのリポジトリに置くしか方法はないでしょうか？

[Kazunori Sato]

とりいそぎ自己解決しました。

img.crossOrigin = "Anonymous";

を指定し、かつChromeブラウザにCORS回避の拡張を入れたら動きました。もっとスマートな解決方法があればお知らせください。

[Yuki Sato]

@Kazunori-Sato こんにちは。
CORSについてはリポジトリに画像を入れていただくのが一番良い方法になります。簡単にファイルをuploadできるフォームを用意する予定でいます。

もしくは画像をbase64に変換していただきimgタグのsrc内に直接記述するという方法もあります。