Upload image to p5 via a dialog box

[philspitler]

Hi, I am thinking of moving one of my Processing projects over to p5 and would like to have the user upload their own image to get processed.

Is there a way to have a dialog box prompt a file upload?

Thanks
Phil

[GoToLoop]

• Studio Sketchpad : an open studio for creating beautiful code
• p5js.org/reference/#/p5.Element/drop
• p5js.org/reference/#/p5/createFileInput
• p5js.org/reference/#/p5.File

[philspitler]

Amazing… I tried searching but couldn’t find anything relevant and these are all great.

Much appreciated.

Phil

[philspitler]

@GoToLoop I tried to implement some of the code you linked and am having a few problems… I am a novice coder (as you can probably tell).

Basically I start with a default image but would like the user to be able drag a new image in to get treated.

When I run the code it works until I drag a new image in, then it errors.

Any suggestions would be gratefully received.

Thanks

Phil

let img;
let saveSVG_button;
let sizeSlider;
let spaceSlider;
var dotSize;
var space;



function preload() {
  img = loadImage("will.jpg");
}


function setup() {
let c = createCanvas(1024, 1024);

  noStroke();

  colorMode(RGB);
  ellipseMode(CORNER);
  
  
  
  
  sizeSlider = createSlider(6, 20, 6);
  sizeSlider.position(10, 10);
  sizeSlider.style('width', '400');
  spaceSlider = createSlider(0, 20, 6);
  spaceSlider.position(10, 30);
  spaceSlider.style('width', '400');
  saveSVG_button = createButton('save SVG');
  saveSVG_button.position(200, 10);
  saveSVG_button.mousePressed(saveSVGfunc);
  
  c.drop(gotFile);
  
}

function draw() {
  background(255);
  dotSize = sizeSlider.value();
  space = spaceSlider.value();

  for (var x = 1; x < img.width; x = x + (dotSize+space)) {
    for (var y = 1; y < img.height; y = y + (dotSize+space)) {
      c = img.get(x, y);
      fill(c);
      circle(x, y, dotSize);
    } // end for y
  } // end for x
}



function saveSVGfunc() {
  save('MBTB_Dots.svg');

}


function gotFile(file) {
  img = createImg(file.data, '').hide();
  if (img.width > img.height)  img.resize(1024,0);
   else img.resize(0,1024);
  
  
}

[GoToLoop]

[valid reason] Loading image outside Preload (p5js)

Hello! I want to know if there was a way to make sure an image was loaded when loading it outside Preload. I sometimes get “Uncaught ReferenceError: loadImage is not defined” and sometimes it loads. It doesnt seem to be predictable. The reason why I need to load outside preload is because I am creating a “preview art on your wall” module where clients load pictures of their wall at runtime in a product page via a “upload image” button in the page. They can change their wall as they please.

[gshaw]

Hi Phil and GoToLoop,
You can use a callback function in the loadImage() function. The parameters are:
loadImage(path, [successCallback], [failureCallback])

for example something like:

img1 = loadImage(url, () => {
      // when image loaded do the following steps... for example
      w = img1.width;
      h = img1.height;
      resizeCanvas(w, h); // match canvas size to image
      background(bgColour); // set canvas background colour
    });

[philspitler]

Thanks @gshaw in my code I am using “createImage” once a file is dropped so I’m not sure how to implement the callback in “loadImage”.

Do you think you could help me figure that out?

Much appreciated.

Phil

[gshaw]

Hi Phil,

I think what you need is to make a function to process the image once it is loaded, then use this as the “success callback” in the loadImage() function.

In the example I gave above the callback function was built into the parameters passed to the loadImage, which might have made it less clear, so here is some pseudocode for the callback as a separate function.

var img1;  // global variable to hold the image.

whenImageLoaded = function() {
  // do whatever processing steps you need. 
  // In the code I made,  the image loaded into a global variable img1, 
  // so here you might do things like resizing the image, or pasting it to the canvas, eg
  // put the image on the canvas with top left at 200,100, with width 100, height 100
  image(img1,200,100,100,100); 
}

// then wherever you need to load your image, you call it with the callback
img1 = loadImage(ImageNameOrURL, whenImageLoaded);

I had a quick web search, and found this page that looks like it explains this more:
https://nycdoe-cs4all.github.io/units/3/lessons/lesson_3.1

In terms of a dialog to upload the image, I have used quicksettings.js. It makes it easy to make a separate canvas to upload files, adjust parameters, upload files, add text/html instructions etc. https://github.com/bit101/quicksettings. Alternatively, you can use the native P5js functions as GoToLoop suggests, or else hunt out drag and drop javascript file upload packages.

Hope that helps.

[philspitler]

Excellent, thanks I’ll take a look.

Phil