文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== ファイルのドラッグアンドドロップ ====== アプリケーションを実装する際、外部ファイルの読み取りはよく行う操作の一つです。特にシステムに予め登録された ファイルではなく、ユーザが任意にファイル指定をするということがよくあります。例えば私が作ったオンラインセミナーの[[https://editor.p5js.org/tetsuakibaba/present/LuDBVKGLu?fbclid=IwAR1SSGF8KorHmLX53XoSBTWZqCUf4NA4oOLNgUCZlKCikd-Frj8vjeWu6I8|広報用壁紙簡易作成ツール(Easy Wall Banner Generator)]]では、ユーザからもらった画像で格子柄の広報用画像を生成させています。 このページではp5jsを利用して、このようなファイル操作を実現するための内容を記述しています。canvasにもらった画像を描く例はp5js公式でも動画と一緒に紹介されていますが、html側の要素と同時に扱う方法がありません。以下のサンプルは、画像ファイルをドラッグアンドドロップすると、その場所にドロップした画像を表示するプログラムです。画像をドロップすると、imgタグを新しく生成して、ドロップした画像を新たに表示しなおしています。コメントアウトしていますが、PImage型でもらいたい人は、その箇所を参考にしてください。 <html> <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/vhzrbL-Sx" height=600px width=100%></iframe> </html> /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/06.drag_and_drop.txt 最終更新: 2021/03/09 02:33by baba