load image from URL in .js: Is it possible? Alternatives?

newmiracle

I would like to load an image from a URL within a javascript sketch. Looking around, it seems like there are substantial issues with doing that.

Seems like it would be a fairly popular request as a feature. Is there any way around this, yet? A library that might make this work? Have you hit this wall in your processing.js projects? What alternatives did you choose?

hamoid

I haven't tried doing that before, but your question picked on my curiosity. What are the issues you have read about? I just tried this and it seems to work:

PImage i;
void setup() {
  size(164, 164);
  int ID = int(random(11000, 13000));
  i = loadImage("http" + "://www.flaticon.com/png/64/" + ID + ".png");
}
void draw() {
  if(i.width > 0) {
    image(i, 50, 50);
    noLoop();
  }
}

(I separated the "http" just to avoid troubles with the auto-formatting of code in this forum)

newmiracle

huh... that's weird.

I had read that loading content from other web spaces (images, XML files, whatever) could result in errors because of the way that security is set up. Reading around, the rule seems to be 'you always pre-load images for .JS!", so seeing your example work so well is a surprise to me.

Also, there isn't a set URL image loader in the Processing.JS examples. The normal one has a little notifier that says "This example will not run in a web broswer". Although, now that I think about it, maybe they mean running the Java applet in the browser and not the JS version of the sketch. In either case, it doesn't work in JS mode.

I'm still getting the hang of this whole thing and what Processing and JS are capable of. Thanks for helping me through an amateur question. Hopefully in the future this post will help people dense as me. :))