select("#loadButton").mouseClicked(function(){
var file = this.files[0];
file.src = URL.createObjectURL(this.files[0]);
loadImage(file.src, img => {
image(img, 0,0);
});
});
I'm building a paint app using p5.js and I'm trying to upload an image file but it doesn’t show on the screen.
You need to setup a file input and handler. After that, you need to write the image to the canvas. The following was copied directly from the p5.js website:
let input;
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;
}
}