在 .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);
  orbitControl();
  push();
  translate(0,-500);
  let n = 0;
  for (let j = 0; j < 20; j++) {
    for (let i = 0; i < 20; i++) {
      
      let x = map(i,20,-500,500);
      let y = map(j,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>

解决方法

这会给你一个字典，里面有一个键和一个与之对应的图像。例如，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
})

for-loop image image image javascript loadimage

在 .js

问题描述

解决方法

相关问答