javascript - p5.j​​s loadPixels() 与用户上传返回全零数组

Question

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

以下代码实现了这一点，但是，上传的第一张图片总是返回一个 zeros 数组。

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)
    });   
  } 
}

标签： javascriptp5.js

Answer 1

看看这一行：

let c = get();

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

然后你使用这条线将图像绘制到画布上：

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

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

您可能需要该p5.Image.get()功能而不是通用get()功能。您可以在参考资料中找到更多信息。