p5js:06.drag_and_drop

ファイルのドラッグアンドドロップ

アプリケーションを実装する際、外部ファイルの読み取りはよく行う操作の一つです。特にシステムに予め登録された ファイルではなく、ユーザが任意にファイル指定をするということがよくあります。例えば私が作ったオンラインセミナーの広報用壁紙簡易作成ツール(Easy Wall Banner Generator)では、ユーザからもらった画像で格子柄の広報用画像を生成させています。

このページではp5jsを利用して、このようなファイル操作を実現するための内容を記述しています。canvasにもらった画像を描く例はp5js公式でも動画と一緒に紹介されていますが、html側の要素と同時に扱う方法がありません。以下のサンプルは、画像ファイルをドラッグアンドドロップすると、その場所にドロップした画像を表示するプログラムです。画像をドロップすると、imgタグを新しく生成して、ドロップした画像を新たに表示しなおしています。コメントアウトしていますが、PImage型でもらいたい人は、その箇所を参考にしてください。

  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/06.drag_and_drop.txt
  • 最終更新: 2021/03/09 02:33
  • by baba