p5jsでローカルファイルを読み込みたい場合、createFileInputで作ったinput要素からファイル選択画面を呼び出す。
そのinput要素で、表示する文字を変えたりしようとするのがなかなか難しかった。
いろいろ調べてみたが、以下のような形にするのが定番らしい。
- input要素は隠す
- 代わりのbuttonを表示する
- buttonのイベントでinput要素のclickを呼び出す
コードは以下のような感じ。
function setup() {
fileInput = createFileInput(handleFile);
fileInput.hide();
fileButton = createButton('file open');
fileButton.mousePressed(function(){
fileInput.elt.click();
});
}
- 投稿タグ
- p5.js