Canvas, загрузка картинок

05 мая 2021, 23:00

появилась задачка по работе с Canvas, особо с ним никогда не работал, но сразу столкнулся с моментом который мне не особо нравится.

Дело в картинках, как быть с загрузкой картинок, если их может быть большое количество.

Как избежать огромного дублирования кода

let image1 = new Image();
image1.src = '';
let image2 = new Image();
image2.src = '';
let image3 = new Image();
image3.src = '';

Собственно какие есть пути решения данной проблемы?

UPD: Кто что скажет про такую релизацию?

function getImage(imgNum) {
    let images = ['images/image1.png', 'images/image2.png']
    let selectedImage = new Image();
    selectedImage.src = images[imgNum];
    return selectedImage;
}
console.log(getImage(0));
console.log(getImage(1));

Answer 1

Из вопроса не очень понятно что Вы собираетесь делать с картинками, вот пример как их дружно нарисовать, общий смысл в трансформации массива с урлами в массив с картинками

let ctx = canvas.getContext('2d'); 
 
let pic = i => `https://picsum.photos/id/${i}/100/100` 
 
let images = [pic(33), pic(44), pic(55), pic(66), pic(77)]; 
 
images = images.map((src, i) => { 
  let img = new Image(); 
  img.src = src; 
  img.onload = e => draw(i); 
  return img ; 
}); 
 
function draw(index){ 
  ctx.drawImage(images[index], index * 110, Math.random()*75) 
}

<canvas width=600 height=175 id=canvas>

Answer 2

Можно решить примерно так. В src храним ссылки на картинки. В цикле перебираем каждую ссылку и создаем объект Image. Добавляем в массив images.

let images = [];    
let src = ['link1.com/image.png', 'link2.com/image.png'];
for (let i = 0; i < src.length; i++) {
    let image = new Image();
    image.src = src[i];
    images.push(image);
}