如何解决在 .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
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。