时间戳

首页 > 解决方案 > 从本地文件夹而不是 .js 中的网站加载图像

javascript - 从本地文件夹而不是 .js 中的网站加载图像

问题描述

我对编码非常陌生，特别是 .js 和 Stack。

所以我有这段代码，我想将图像更改为本地文件夹而不是 picsum。我已经搜索并尝试过，但无法做到。有没有办法以不会减慢程序速度的方式从本地文件夹加载图像？

希望我做对了，你能理解我的问题！

let imgs = [];
let num = 15;

function preload() {

  for (let i = 0; i < num; i++) {
    imgs[i] = loadImage("https://picsum.photos/400/400/?image=" + i * 10);
  }
}


function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);
}

function draw() {
  background(0,0,0);
  orbitControl();
  push();
  translate(0, 0, -500);
  let n = 0;
  for (let j = 0; j < 20; j++) {
    for (let i = 0; i < 20; i++) {
      
      let x = map(i, 0, 20, -500, 500);
      let y = map(j, 0, 20, -500, 500);
      
      let z = sin(frameCount + j*10 + i * 10)*350+350;
      push();
      translate(x, y, z);
      texture(imgs[n]);
      plane(50, 50);
      n = (n + 1) % imgs.length;
      pop();
    }
  }
  pop();
}
<html>
    <head>
    <script src="mySketch.js" type="text/javascript"></script><script src="https://cdn.jsdelivr.net/npm/p5@0.7.2/lib/p5.min.js" type="text/javascript"></script>
    </head>
<body>
</body>

</html>

标签： javascriptimagefor-looploadimage

解决方案

这将为您提供一个带有键和与之对应的图像的字典。例如，images["imagefile1.png"] 将返回一个带有 src imagefile1.png 的图像。

const IMAGES_FILES = [
  "imagefile1.png",
  "imagefile2.png"
];

const images = {};
const downloadPromiseImage = Promise.all(IMAGES_FILES.map(downloadImage));

function downloadImage(imageName) {
  return new Promise((resolve) => {
    const image = new Image();
    image.onload = () => {
      images[imageName] = image;
      resolve();
    };

    //  add path to image directory. This path should be relative to your entry HTML file.
    image.src = `./Images/${imageName}`;
  });
}

Promise.all([downloadPromiseImage]).then(() => {
   // do whatever with images dictionary
})

推荐阅读