时间戳

首页 > 解决方案 > 我尝试在 p5.js 中保存 27 张图片，但只有 10 张保存到我的下载文件夹中。为什么所有文件都没有保存？

javascript - 我尝试在 p5.js 中保存 27 张图片，但只有 10 张保存到我的下载文件夹中。为什么所有文件都没有保存？

问题描述

在我的代码中，我尝试将 27 张图片保存到我的下载文件夹中，但是当我运行代码时，它最多只能将 10 张图片保存到我的下载文件夹中。我在控制台中记录了我的结果，代码似乎运行正确。最初我认为 Chrome 或在线 p5.js Web 编辑器存在同时发送太多保存请求的问题，因此我尝试在每次保存后延迟几秒钟，但这种方法不起作用。Chrome 允许从单个站点下载多少次（可能在一定时间内）是否有限制？

我知道代码效率不高，但速度现在并不重要，因为我只是在测试一些东西，而 for 循环的结构是出于特定原因。

let t, w, img, mod, p, dim;

function preload() {
//image loaded
img = loadImage("rose.jpg");
}

function update(pos, a, b, c) {
  let i = img.pixels[pos + a];
  let j = img.pixels[pos + b];
  let k = img.pixels[pos + c];
  let l = img.pixels[pos + 3];
  return [i, j, k, l];
}

function setup() {
  // modified image created and its pixels loaded
 image(img, 0, 0, width, height);
  mod = createImage(img.width, img.height);
  img.loadPixels();
  mod.loadPixels();

  // 3 for loops make counter for image names
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      for (let k = 0; k < 3; k++) {
        //loop through the pixels of the image
        for (let l = 0; l < mod.height * 4; l++) {
          //m is incremented by 4 so each set of rgba values can be manipulated by the update function
          for (let m = 0; m < mod.width; m += 4) {
            //pixel index is calculated and update returns an array of pixel values
            w = img.width * l + m;
            t = update(w, i, j, k);
            for (let n = 0; n < 4; n++) {
              mod.pixels[w + n] = t[n];
            }
          }
        }
        //canvas is created and image is displayed
        mod.updatePixels();
        dim = 550;
        createCanvas(dim, dim);
        image(mod, 0, 0, width, height);
        //save request
        save(mod, ("edited" + i + j + k + ".jpg"));
      }
    }
  }
}

标签： javascriptimagegoogle-chromep5.jsimagedownload

解决方案

P5.js 是开源的。您可以在函数中查看下载文件的源代码p5.prototype.downloadFile。

我没有看到关于可以下载多少文件的任何限制，所以我猜它要么来自浏览器，要么来自p5.js 用来保存文件的库。您可能想尝试其他浏览器或查看文件保存库中是否存在限制。

对于它的价值，我使用这个简化的示例进行了尝试：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 20, 20);
  // save(frameCount + ".png");
}

function mouseClicked() {
  for(let i = 0; i < 100; i++) {
    save(i + ".png");
  }
}

如果我单击鼠标，则只保存 10 张图像。有趣的是，它们并不总是前 10 个，因此在保存调用之间似乎发生了某种竞赛。

但是，如果我取消对函数save()内部的调用的注释draw()，则会保存超过 10 个，但似乎大多数图像都被跳过了。

推荐阅读