====== ファイルのドラッグアンドドロップ ====== アプリケーションを実装する際、外部ファイルの読み取りはよく行う操作の一つです。特にシステムに予め登録された ファイルではなく、ユーザが任意にファイル指定をするということがよくあります。例えば私が作ったオンラインセミナーの[[https://editor.p5js.org/tetsuakibaba/present/LuDBVKGLu?fbclid=IwAR1SSGF8KorHmLX53XoSBTWZqCUf4NA4oOLNgUCZlKCikd-Frj8vjeWu6I8|広報用壁紙簡易作成ツール(Easy Wall Banner Generator)]]では、ユーザからもらった画像で格子柄の広報用画像を生成させています。 このページではp5jsを利用して、このようなファイル操作を実現するための内容を記述しています。canvasにもらった画像を描く例はp5js公式でも動画と一緒に紹介されていますが、html側の要素と同時に扱う方法がありません。以下のサンプルは、画像ファイルをドラッグアンドドロップすると、その場所にドロップした画像を表示するプログラムです。画像をドロップすると、imgタグを新しく生成して、ドロップした画像を新たに表示しなおしています。コメントアウトしていますが、PImage型でもらいたい人は、その箇所を参考にしてください。