Web导出是否在处理图像？

Question

This might be a obvious question but I haven't seen it addressed anywhere, but I'm trying to figure out why my web export of my Processing sketch is not retrieving saved images? I'm thinking I should package the image with the other files, but just dropping the image in the same folder doesn't seem to work. I also know that I am exporting it correctly because when I export sketches without saved images (just shapes or text created within the program), it works just fine.

Does anyone have any experience with this? If this helps at all, the code is below (it's really very simple). Thank you!

draw.pde

void setup () {
  size(1280,800);
  background(255,255,255);
}

void draw() {
  PImage img;
  img = loadImage("drake.png");
  image(img, mouseX, mouseY);
}

Answer 1

Processing's JavaScript mode uses asynchronous loading of images. That means that the image is loaded in the background, and it isn't loaded by the time you try to draw it.

A quick fix (which you should use anyway, even in Java mode) is to not load your images in the draw() function: you'll be reloading the same file 60 times per second! Instead, load it once at the start of the sketch.

Also, if you're using Processing.js, then you need the preload at the top.

/* @pjs preload="drake.png"; */

PImage img;

void setup () {
  size(1280,800);
  img = loadImage("drake.png");
  background(255,255,255);
}

void draw() {  
  image(img, mouseX, mouseY);
}

More info in the Processing.js reference here .