在 ProcessingJS 中加载一个充满图像的文件夹答案

【问题标题】：Loading A Folder Full of Images in ProcessingJS在 ProcessingJS 中加载一个充满图像的文件夹
【发布时间】：2014-07-14 19:40:02
【问题描述】：

我目前正在做一个项目，我需要在其中加载一个充满图像的文件夹。

下面的sn-p在Java模式下完美运行，但是在JS模式下渲染图片失败。我已经尝试了很长时间才能让它工作，我想知道为什么下面的这个片段不起作用，以及是否有任何其他方法可以在不知道文件名的情况下加载一个充满图像的文件夹。

void setup()
{
for(int i = 0; i < myPNGs.length; i++)
  {
    myClasses.add(new Class(myPNGs[i]));
  }
}

PImage[] myPNGs()
 {  

   ArrayList<PImage> myImages = new ArrayList<PImage>();


   File picturesPath = sketchFile("images"); // Supposes you have a "images" folder in your sketch folder
    File[] files = picturesPath.listFiles(); // Get a list of files
    PImage[] images = new PImage[files.length];
    int imageCount = 0;

    for (int i = 0; i < files.length; i++)
    {
        String fileName = files[i].getName().toLowerCase();
        if (fileName.endsWith(".png") || fileName.endsWith(".PNG"))
        {
          images[imageCount++] = loadImage(files[i].getAbsolutePath());
        }
    }
        return images;
  }

我的原帖：http://forum.processing.org/two/discussion/6324/problem-loading-a-folder-full-of-images#Item_1

谢谢。

【问题讨论】：

我是新手，但我认为如果您希望文件夹是动态的并更改文件，则必须进行某种服务器端处理。您可以让 PHP 找到这些文件并使它们可用于 JavaScript。我认为因为JavaScript是客户端运行的，所以它不会直接看到服务器上的目录信息。

标签： javascript directory processing.js

【解决方案1】：

图像需要@preload 指令（http://processingjs.org/reference/preload），并且受互联网工作方式的限制，而不是文件系统：您不能只获取目录列表并加载文件夹中的每个文件，因为没有Internet 上的目录列表，除非您将该功能写入您的网络服务器，并使用一些客户端 javascript 来解释结果。

您必须构建一个要加载的图像列表，并在使用它们之前预加载每个图像，或者编写一些客户端-服务器代码，可以向您的服务器询问目录内容，构建预加载列表，然后加载你的草图，并在草图源之前加上预加载指令。

或者，您可以使用 requestImage 概念，在其中请求图像，然后您必须检查 img.width 在某个时候是否大于 0；一旦完成，图像就可以使用了，但是您仍然需要服务器/客户端代码来获取目录列表。

【讨论】：