Question

我正在使用PImage类。通常我会制作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的灰色画布重叠。鉴于我编写的代码，这是我期望的结果。

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

myoutput = createImage(300, 300, RGB);

我的问题与后面的内容有关：

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

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

但它不起作用。我刚拿到一个350 x 350的大灰盒子。而且我不确定为什么。虽然我有我的怀疑。当我在javascript中处理图片时，我已经等待页面加载（使用像window.onload（）{}等事件监听器），然后才能访问图像的宽度/高度属性。

更新：我看到另一篇帖子有以下内容：

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

所以我在宣布我的PImage对象之前就已经包含了这个，现在以下行就可以了。

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

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

Answer 1

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

但是当您使用Processing.js运行时，您将以JavaScript身份运行。 JavaScript会加载图像异步，这意味着在您的代码继续运行时，图像会在后台加载。这意味着您不能保证在下一行执行时加载图像，这就是图像的width和height未设置的原因。

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

来自the Processing.js reference：

此指令调节图像预加载，这在草图中使用loadImage（）或requestImage（）时是必需的。使用此指令将预加载引号之间指示的所有图像，如果使用多个图像，则以逗号分隔，以便在草图开始运行时可以使用它们。由于资源是通过AJAX方法加载的，因此不使用此指令将导致草图加载图像，然后立即尝试以某种方式使用此图像，即使浏览器尚未完成下载和缓存。

无法在setup（）

1 个答案: