p5.j​​s loadPixels（），用户上传返回全零数组

Question

我正在编写的应用程序要求用户上传图像。图片上传后，我想获取所有像素的数组。

以下代码可实现此目的，但是，上传的第一张图片始终返回零数组。

let img; 
let input; 


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


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

imageCallback = (img) => {
  let c = get();
  console.log(pixels);
}

function handleFile(file) { 
  if (file.type === 'image') { 
    img = createImg(file.data, imageCallback);   
    img.hide(); 
  } 

}

图片上传结果（第二张图片将始终具有填充的像素数组）：

在添加imageCallback函数之前，我收到了此错误，希望可以解决该问题。没有，所以我现在在这里。

感谢您的帮助！

编辑：有效的解决方案

正如@KevinWorkman在下面指出的那样，我尚未将图像写到画布上。

我重写了代码，以便回调函数确保在运行get()之前将图像加载并写入画布。

let input; 

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


function handleFile(file) { 
  if (file.type === 'image') { 
    loadImage(file.data, img => {
      image(img, 0, 0, width/2, height);
      get();
      console.log(pixels)
    });   
  } 
}

Answer 1

看看这一行：

let c = get();

请注意，这正在调用常规get()函数，该函数返回画布的像素数组。另请注意，此时您尚未将图像绘制到画布上。这就是为什么这时全为零。

然后您使用此行将图像绘制到画布上：

image(img, 0, 0, width, height);

现在，如果您上传新图像，则再次运行第一行，它将返回画布的像素阵列。此时，画布仍将显示先前加载的图像！这不是新加载的图像的像素阵列！

您可能希望使用p5.Image.get()函数而不是常规的get()函数。您可以在the reference中找到更多信息。