无法在 setup() 中访问 PImage 对象的 width/height 属性

Question

我正在使用 PImage class。通常我制作 2 个 PImage 对象，将图像加载到其中一个（我的输入图片）并使用 createImage() 创建一个空白图像，这将成为输出。然后我使用 loadPixels() 方法访问输入数据，进行一些操作，然后将相应的输出像素设置为结果。到目前为止我还没有遇到任何问题。

输入和输出 PImage 对象的尺寸需要相同，以使逐像素操作尽可能直接。

这是泡菜：

PImage myinput;
PImage myoutput;

void setup() {
  size(350, 350);      
  myinput = loadImage("myfile.jpg");  
  // the pic is 300 x 300

  //myoutput = createImage(myinput.width, myinput.height, RGB);
  //I've hardcoded the width and height below
  myoutput = createImage(300, 300, RGB);
}

void draw() {  
  image(myoutput, 0, 0);
}

上面的结果是一个 300 x 300 的黑色正方形与一个 350 x 350 的灰色 canvas 重叠。根据我编写的代码，这是我期望的结果。

现在，在上面的示例中，我已经使用以下行对 'myoutput' 的宽度和高度进行了硬编码：

myoutput = createImage(300, 300, RGB);

我的问题与以下内容有关：

我宁愿做这样的事情，而不是对值进行硬编码：

myoutput = createImage(myinput.width, myinput.height, RGB);

但它不起作用。我刚得到一个 350 x 350 的大灰色盒子。我不确定为什么。虽然我确实有我的怀疑。当我处理 javascript 中的图片时，我必须等待页面加载（使用 window.onload() {} 等事件监听器），然后才能访问 width/height图片的属性。

更新：我看到另一个 post 有以下内容：

/* @pjs preload="myfile.jpg"; */

所以我只是在声明我的 PImage 对象之前包含了这个，现在下面的行可以工作了。

myoutput = createImage(myinput.width, myinput.height, RGB);

我对这段新代码感到很困惑。

Answer 1

当您运行在 Java 模式下绘制草图时，您运行宁为 Java。 Java 加载图像同步，这意味着在图像完全加载之前代码不会继续运行ning。这就是它在 Java 模式下工作的原因。

但是当您运行正在使用 Processing.js 时，您运行正在作为 Java 脚本。 Java脚本加载图像异步，这意味着图像在后台加载，同时您的代码继续。这意味着您不能保证图像在下一行执行时完成加载，这就是图像的 width 和 height 未设置的原因。

preload 命令告诉 Processing.js 在草图开始执行 之前加载图像 ，这样可以保证图像在您之前加载尝试访问其 width 和 height.

来自the Processing.js reference：

This directive regulates image preloading, which is required when using loadImage() or requestImage() in a sketch. Using this directive will preload all images indicated between quotes, and comma separated if multiple images are used, so that they will be ready for use when the sketch begins running. As resources are loaded via the AJAX approach, not using this directive will result in the sketch loading an image, and then immediately trying to use this image in some way, even though the browser has not finished downloading and caching it.

无法在 setup() 中访问 PImage 对象的 width/height 属性

cannot access width/height properties of PImage object in setup()

processing.js