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
}

Also I am not using jQuery, mostly because I don't really understand what it is yet, and I am not sure if it is worth learning about — Vadim Kim, Oct 10 '19 at 20:45

score 2 · Answer 1 · answered Oct 10 '19 at 21:19

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.

answered Oct 10 '19 at 21:19

Kevin Workman

41,537
9
68
107

Hello, think it could work but I am looking for a different way to do this without importing the dom library. It just doesn't feel good to import the whole library just for 1 function – Vadim Kim Oct 11 '19 at 17:13
@VadimKim You can look at how the library does it behind the scenes. If I were you I would just use the library though. – Kevin Workman Oct 11 '19 at 17:15

score 2 · Accepted Answer · answered May 06 '20 at 03:27

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.

Use image uploaded through HTML DOM file uploader in p5js

2 Answers2