Javascript p5.js loadPixels（），用户上传返回全零数组

我正在编写的应用程序需要用户上传图像。上传图像后，我想得到所有像素的数组

但是，下面的代码实现了这一点，上载的第一个图像总是返回一个零数组

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 c = get();

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

请注意，这是调用general

get（）

函数，该函数返回画布的像素数组。还要注意，此时，您还没有将图像绘制到画布上。这就是为什么这一点都是零

然后使用以下线条将图像绘制到画布：

let c = get();

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

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

---

您可能需要

p5.Image.get（）

函数，而不是常规的

get（）

函数。您可以在中找到更多信息。

嘿，凯文，请原谅我的困惑-我的印象是，在回调中运行

get（）

只能在加载映像后才能解析。如果不使用回调（或某种承诺），我如何确保我的代码只在执行后运行？我将尝试使用

p5.Image.get（）

，但我想了解这种行为，因为它是我困惑的主要根源。谢谢你的回答@JaredWilber确实加载了映像，但是

get（）

函数根本不引用映像。它引用的是画布，当您调用它时，没有任何东西被绘制到画布。要进行实验，请尝试在画布上绘制一些东西，例如在

setup（）

函数中在画布上绘制一个红色圆圈，您将看到它反映在正在打印的像素阵列中。谢谢您的帮助。我用我的答案编辑了这个问题。由于某种原因，我无法使

p5.Image.get（）

正常工作（它似乎只在工作的地方产生空数组），但

get（）

在我的解决方案中按预期工作。@JaredWilber还注意到

p5.Image

有一个

像素

字段，您可能可以直接使用：