How do I load pixels from uploaded image file in p5js?

Question

The image is created from a file input. With this input it is then loaded to make sure the image exists before loading pixels. Either way, both using the successful callback in loadimage and without a callback, the error says TypeError: img.loadPixels is not a function. I assumed this meant the image is not loaded in time for the pixels to be loaded.

let imgInput, img;
let reds = [], greens = [], blues = [], alphas = [], newColor;
let tileSize = 20;

function setup() {
  createCanvas(400, 400);
  
  //creates input box for image
  imgInput = createFileInput(handleFile);
  imgInput.position(20, 20);
  imgInput.hide();
  
  //creates the button to start the game
  startBtn = createButton('Start Game');
  startBtn.position(width/2-startBtn.width/2, height/2 - startBtn.height/2);
  startBtn.mousePressed(start);
}

function draw() {
  //if image exists, change canvas to fit and create image
  if (img) {
    resizeCanvas(img.width, img.height);
    image(img, 0, 0, width, height);
  } else {
    background(255);
  }
}

//determines what to do with file
function handleFile(file) {
  print(file);
  if (file.type === 'image') {
    img = createImg(file.data, '');
    img.hide();
    let imgSrc = img.attribute("src");
    loadImage(imgSrc, storeImgValues);
  } else {
    img = null;
  }
  imgInput.hide();
}

//all pixels are stored in lists
function storeImgValues() {
  img.loadPixels();
  
  console.log('hi')
  
  let pixel = 0;
  for (let l = 0; l < img.pixels.length; l += 4) {
    reds[pixel] = img.pixels[l];
    greens[pixel] = img.pixels[l+1];
    blues[pixel] = img.pixels[l+2];
    alphas[pixel] = img.pixels[l+3];
  }
}

//when button clicked, hide it and show input for image
function start() {
  startBtn.hide();
  imgInput.show();
}

I tried adding in the callback to allow the image to load first from loadimage, this ended in the same error and this callback is included in the code.

Answer 1

I needed to set img = loadImage not just loadimage.