How to create p5 image from local user file?

p5.js Coding Questions
1

Hi there,

I’m working on a drag and drop p5 sketch, and it isn’t working so well.

So far I managed to make the drag and drop function, but I cant’ manage to transform the image it get into p5.image objet.

Anyone knows how to do this ?

I found this video but lot of functions used here are not in the p5 reference anymore and are not working in the p5 online editor. @GoToLoop showed me this sketch but I didn’t manage to replicate his way of translating image to p5.image

Here is my sketch, you can run it here

var scan;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  if  (scan) image(scan,0,0);
}

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var drop = evt.dataTransfer.files;
	if (drop[0].type === 'image/png')  {
    scan = createImage(drop[0].data);
  }
  else print(drop[0].type);
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

  // Setup the dnd listeners.
  var dropZone = document.body;
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
2

I found what I needed here :smile:
https://p5js.org/reference/#/p5.Element/drop

2 Likes