(p5element).drop

def setup 
  c = createCanvas(100, 100)
  background(200)
  textAlign(CENTER)
  text('drag & drop file', width / 2, height / 2)
  c.dragOver do
    background(240)
    text('Dragged over', width / 2, height / 2)
  end
  c.dragLeave do
    background(200)
    text('Dragged off', width / 2, height / 2)
  end
  c.drop do |file|
    background(200)
    text('dropped file:', width / 2, height / 2)
    text("[#{file.type}]", width / 2, height / 2 + 30)
  end
end

def setup 
  c = createCanvas(100, 100)
  background(200)
  textAlign(CENTER)
  text('drop image', width / 2, height / 2)
  c.drop do |file|
    @img = createImg(file.data, '').hide   # <img>要素を生成
  end
end

def draw 
  if @img
    image(@img, 0, 0, width, height)       # <img>要素を描画
  end
end

p5.jsリファレンス(参考情報)

[p5.js] (p5.Element.obj).drop

概要

ファイルが HTML要素上にドロップされたときに実行する処理を登録します。

書式

obj.drop([void]) do |file| ... end

引数

引数名内容備考オプションデフォルト値
void無効化falseが指定された場合にはブロックは実行されない
(dropメソッドでは効果なし)		○nil
...ブロック実行する処理

戻値

なし

備考

・ブロック引数'file'にセットされるファイル情報は
　HTMLInputElement.filesによって保持されている Fileオブジェクトをベースにしたもので、
　以下のような情報を持っています。

要素内容
file.nameファイル名
file.typeMIMEタイプ("image", "text"など)
file.subtypeMIMEサブタイプ("png", "plain"など)
file.sizeファイルサイズ
file.dataデータ(ファイルの内容)

関連

(p5element).dragOver
(p5element).dragLeave
createFileInput