I want to fill the images array by completing the setlmageArray method
I've searched and tried the method I learned, but I can't find a good way.
Photo names start with 001-145
That part of the coding.
const get = (element) => document.querySelector(element);
class ScrollVideo {
constructor() {
this.container = document.documentElement;
this.canvas = get('.canvas');
this.ctx = this.canvas.getContext('2d');
this.width = 1292;
this.height = 969;
this.imagePath = './assets/sample_';
this.imageExtenstion = '.jpg';
this.imageCount = 145;
this.initialNumber = 0;
this.image = new Image();
this.images = [];
this.setImageArray();
this.setImageToCanvas();
this.scrollEvent();
}
setImageArray() {
for (let i = 1; i <= this.imageCount; i ) {
let fileName = '';
this.image = new Image();
if (i < 10) fileName = '00';
else if (i < 100) fileName = '0';
}
}
CodePudding user response:
Assuming that you want to populate the images array with a new Image object containing the source path of each image.
You can try the following:
const get = (element) => document.querySelector(element);
class ScrollVideo {
constructor() {
this.container = document.documentElement;
this.canvas = get('.canvas');
this.ctx = this.canvas.getContext('2d');
this.width = 1292;
this.height = 969;
this.imagePath = './assets/sample_';
this.imageExtenstion = '.jpg';
this.imageCount = 145;
this.initialNumber = 0;
this.images = [];
this.setImageArray();
this.setImageToCanvas();
this.scrollEvent();
}
setImageArray() {
for (let i = 1; i <= this.imageCount; i ) {
// separating the logic to get the filename in another method
let fileName = getFileName();
// creating a variable to create a new image.
// no need to create an 'image' property in the ScrollVideo object
let image = new Image();
// setting the source attribute of the image
image.src = this.imagePath . fileName;
// pushing the new image to the 'images' array
this.images.push(image);
}
}
getFileName (i) {
let fileName = '';
if (i < 10) fileName = '00';
else if (i < 100) fileName = '0';
fileName = i this.imageExtenstion;
return fileName;
}
}
You can find more information about the Image class here : https://developer.mozilla.org/fr/docs/Web/API/HTMLImageElement/Image
If you know the width and height of each image, I suggest adding these value to the Image constructor in the setImageArray method:
let image = new Image(width, height);