p5jsのloadImage()とcreateImg()について

こういうことでつまづくというか、そもそも問題になる人もいないと思うけど、せっかくなので残しとこうと思います。

loadImage()

loadImageはImageオブジェクトになります。widthやheightへのアクセスも簡単です。

createImg()

createImg()はElementオブジェクトになります。

createImg()で生成したオブジェクトにもwidthやheightのプロパティはあるのですが、アクセスしても0が返って来てしまいます。デベロッパーツールで開いたらちゃんとwidthとheightがあるのになんででしょう？

一応image関数に渡してwidthとheightを指定したらそのサイズにリサイズされます。なので、基本的に問題ないのですが、ピクセル単位でアクセスしたい場合、pixels配列の番地が指定出来ません。

ファイルを選択してから描画処理をしたかったのですが、その場合createInputFile()→createImg()で渡さなきゃいけないのでどうしようもなくお手上げ状態で３時間ぐらい無駄にしたのでせめてnoteにでも残しておくかと思い書きました。

ほんで書いてる間に、onclickイベントでp5jsのscriptファイル読み込めばよくね？てことに気づいて、調べたらいけそうなのでそれでやってみようと思います。