def setup
createCanvas(200, 200)
input = createFileInput(true) do |file|
if file.type == 'image'
@img = createImg(file.data, '')
@img.hide
else
@img = nil
end
end
input.position(0, 0)
end
def draw
background(220)
image(@img, 0, 0, width, height) if @img
end
ファイル選択用ダイアログを生成します。
| 引数名 | 内容 | 備考 | オプション | デフォルト値 |
|---|---|---|---|---|
| multiple | 複数選択の可否 | true ... 複数ファイル選択可 false ... 複数ファイル選択不可 | ○ | false |
| ... | ブロック | ファイル選択後の処理 (ブロック引数'file') |
elm : p5elementオブジェクト
(<input type="file" (multiple) />タグの HTML要素)
・ローカルに置かれているファイルを選択することができます。
・選択されたファイルの情報がブロック引数にセットされますので、
ブロック内で当該ファイルの処理をおこなうことができます。
・引数'multiple'に trueを指定すると複数のファイルを選択することができます。
この場合、選択されたファイルが１つずつブロック引数にセットされ、
ファイルの個数分だけブロックが順次実行されます。
・ブロック引数'file'にセットされるファイル情報は
HTMLInputElement.filesによって保持されている Fileオブジェクトをベースにしたもので、
以下のような情報を持っています。
| 要素 | 内容 |
|---|---|
| file.name | ファイル名 |
| file.type | MIMEタイプ("image", "text"など) |
| file.subtype | MIMEサブタイプ("png", "plain"など) |
| file.size | ファイルサイズ |
| file.data | データ(ファイルの内容) |