Use image uploaded through HTML DOM file uploader in p5js

Question

I am attempting to allow users to upload their image file through DOM file uploader ( that is <input type="file"></input>) but after I do that I am unsure how to move the image to JavaScript and process it using p5.js. How do I convert an HTML file to a p5.js file or an array of pixels, or really anything I can work with or read as values in JavaScript?

First I restricted the element to only accept .png and .jpg files.

Then I tried using .file[0] syntax and tried to load the image through its path using .value inside of the loadImage() function.

Neither works, and I am just generally unsure as to what to do from this point.

<div id="uploadMenu">
  <h4>Please select your image file:</h4>
  <input accept=".png, .jpg, .jpeg" type="file" id="imageUpload">
  <button onclick="fileToGrid()">Done</button>
  <script>
  </script>
  <script>
  let thisWindow = document.getElementById("uploadMenu");
  let windowWidth = thisWindow.style.width;
  console.log(windowWidth);
  thisWindow.style.left = `${innerWidth/2 - 100}px`
  thisWindow.style.top = `${innerHeight/2 - 50}px`
  </script>
</div>

function fileToGrid() {
  let uploadFromHTML = document.getElementById("imageUpload");
  let uploadedImage = loadImage(uploadFromHTML.value);
  let imageW = uploadedImage.width;
  let imageH = uploadedImage.height;
  console.log(imageW, imageH); 
// the end goal is to convert this image to an array of its pixel values
}

Answer 1

it has been a while since I posted this but I figured it out.

So we first find the upload dom element, in this example mine's id was called just "upload".

const selectedFile = document.getElementById('upload');

We then get the file that was uploaded

const myImageFile = selectedFile.files[0];

We can then create a URL to the image by doing the following.

let urlOfImageFile = URL.createObjectURL(myImageFile);

If we use p5.js we can now do this to get a p5jsImage object.

let imageObject = loadImage(urlOfImageFile);

I would recommend creating a callback function on this if you want to then draw the image because it might not be loaded in right away. All together this becomes this:

const selectedFile = document.getElementById('upload');
const myImageFile = selectedFile.files[0];
let urlOfImageFile = URL.createObjectURL(myImageFile);
let imageObject = loadImage(urlOfImageFile, () => {image(imageObject, 0, 0)});

Alternatively, you can also use that same URL as a src for an image dom element.

Answer 2

Check out the createFileInput() function. Reference is here.

From that page:

let img;

function setup() {
  input = createFileInput(handleFile);
  input.position(0, 0);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(file);
  if (file.type === 'image') {
    img = createImg(file.data);
    img.hide();
  } else {
    img = null;
  }
}

The example on that page shows how to create a file input in P5.js and then get the image from that.

You can probably do the same thing with an existing file input in the DOM.