1

I want my processing sketch to load images from lorempixel at random, and display them to the user. I can do this perfectly fine from Processing ran in the Processing IDE, but it fails when I use it with Processing.js.

Here is my setup:

PImage img;

void setup() {
   int x = (int) random(400,1024);
   int y = (int) random(400,768);

   String url = "http://lorempixel.com/" + x + "/" + y;
   img = loadImage(url, "jpg");
   size(x,y);
}

I get the following error in the JS console

GET http://lorempixel.com/494/548.jpg/ 404 (Not Found) processing-1.4.1.min.js:13
   cW.loadImage processing-1.4.1.min.js:13
   setup
   b6 processing-1.4.1.min.js:13
   F.Processing processing-1.4.1.min.js:13
   Z processing-1.4.1.min.js:13
   T.X.onreadystatechange

Why is it adding a .jpg to the end of my URL? Is there any way to load these images in the way I want?

I've tried removing the extra .jpg parameter from the loadImage call, but when I do that it successfully loads the image, and then crashes my program with the following error

Unable to get image data from canvas because the canvas has been tainted 
by cross-origin data.

Can anyone explain why this is happening?

JeremyKun
  • 2,987
  • 2
  • 24
  • 44
  • Also, as part of the program that follows loading the image from lorempixel, I compute the "gradient" of the image, which involves constructing a new PImage and filling it pixel by pixel, and then displaying that to the canvas. I don't know if this is relevant, but I suppose it's "cross-origin". – JeremyKun Feb 20 '13 at 21:28

1 Answers1

0

This link can help you. Basically you have to enable CORS.

Community
  • 1
  • 1
Gaurav Pandey
  • 2,798
  • 4
  • 28
  • 41
  • I don't understand how to do that with Processing. All of the examples I read related to this say you have to modify the HTTP headers... – JeremyKun Feb 20 '13 at 21:40
  • For that http://stackoverflow.com/questions/12477110/how-to-set-header-access-control-allow-origin-for-xdomain this link is a good source. – Gaurav Pandey Feb 20 '13 at 21:44
  • By the way which server are you using to serve the images? – Gaurav Pandey Feb 20 '13 at 21:45
  • I am not serving the images. They come from a website called lorempixel.com – JeremyKun Feb 20 '13 at 21:46
  • I have also tried it with other websites, such as placekitten.com – JeremyKun Feb 20 '13 at 21:53
  • Yeah all the websites other than the one, which is yours will give cross domain problem. I mean if you will try to load the images of your own domain, they will work perfectly well. By the wayyou can do it easily on server side, I mean modify or add header like in java you can use addHeader or setHeader methods for reqeuest/response. Do some google and you will get through it. – Gaurav Pandey Feb 20 '13 at 22:09