Image読み込み時のCORS対応



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

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

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



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

    img.crossOrigin = "Anonymous";

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


  • administrators

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

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


 

Recent Projects

  • @nak435 かしこまりました。よろしくお願いします。

    read more
  • @Yuki-Sato さん、

    外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    今週末に確認しますので、お待ちください。

    read more
  • @nak435 時間がかかってすいません、

    なんとか3.3vをgndにつないでFlick Largeを動かしたかったのですが、うまく動かすことができなかったです。
    3.3vをgndを繋がずに接続するというのはライブラリで推奨して伝えることは難しいと思ってます。

    Flick LargeでなくFlick Hatの方で、外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    よろしくお願い致します。

    read more
  • @nak435 ありがとうございます。
    接続は3.3vのgnd以外同じでした。
    エラーはそのせいかもしれませんが、しかし電気的にはgndを繋がない場合3.3vとしてうまく供給できないはずなのでそこが不思議です。

    教えていただいたプログラムの部分を修正して試してみたいと思います。
    また少し時間がかかりそうなのですが、早めに試したいと思います。

    引き続きよろしくお願い致します。

    read more