javascript - Processing.js 在 loadImage() 上将 "jpg"添加到 URL 末尾

Question

我希望我的处理草图能够随机加载 lorempixel 中的图像，并将其显示给用户。我可以通过在处理 IDE 中运行的处理来完美地完成此操作，但当我将其与Processing.js 一起使用时，它会失败。

这是我的设置:

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);
}

我在 JS 控制台中收到以下错误

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

为什么要在我的 URL 末尾添加 .jpg？有什么方法可以按照我想要的方式加载这些图像吗？

我尝试从 loadImage 调用中删除额外的 .jpg 参数，但是当我这样做时，它成功加载了图像，然后导致我的程序崩溃并出现以下错误

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

谁能解释一下为什么会发生这种情况？

Answer 1

这个link可以帮你。基本上你必须启用 CORS .