how to access an image that's dragged onto a DOM element

djneils98

playing around with file dragging. I can get an image dragged into the page to display on the page using a createimg command and then I can put that image into the P5 canvas but is there a way of getting the dropped image file straight into a variable so I can access its pixels? I tried this but no dice:

function gotFile(file){

var img = file.data image(img,0,0) }

GoToLoop

http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest

djneils98

thank you!!

djneils98

may I ask - the second argument you used in "loadImage" (redraw) - what is this for? And also - can you use the same dragging idea with sound files. I tried using var song = loadSound(f.data) but it doesn't play when I then use song.play() kind regards and thanks Neil

GoToLoop

That sketch was made for the old forum link below. Check that out to know its context: :-bd
https://forum.Processing.org/two/discussion/13650/dropped-image-not-showing-in-the-draw-loop-gotfile-createimg-image#Item_4

The second argument you used in "loadImage" (redraw) - what is this for?

Look up here: http://p5js.org/reference/#/p5/loadImage
It's called successCallback parameter. That is, the function called when the loading is successfully completed.

In our own case, it's gonna callback function redraw(), which is related to noLoop() & loop():

1. http://p5js.org/reference/#/p5/noLoop
2. http://p5js.org/reference/#/p5/loop
3. http://p5js.org/reference/#/p5/redraw

I tried using var song = loadSound(f.data) but it doesn't play when I then use song.play()

Statement var song = loadSound(f.data) declares a local variable called song.
It is then scoped to the function it was declared within. External functions can't see it! :-S

P.S.: Also read about class p5.File to know more about the object passed to drop()'s callback: L-)

1. http://p5js.org/reference/#/p5.Element/drop
2. http://p5js.org/reference/#/p5.File