How can I print an image through an array method?

byMR

April 4, 2022

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';
                
                              }
                             }

>Solution :

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: