2

появилась задачка по работе с 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));
4
  • используйте массив 31 июл 2019 в 7:03
  • @StrangerintheQ, обновил вопрос, что думаете про такую реализацию?:
    – user298256
    31 июл 2019 в 7:25
  • 1
    а если картинка не загрузится?
    – Dmytro
    31 июл 2019 в 7:31
  • @Дмытрык действительно, не продумал
    – user298256
    31 июл 2019 в 7:39

2 ответа 2

4

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

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>

1
  • Ничего специфического с ними делать не собираюсь, у меня в классе есть метод для рисования, соответственно различные картинки будут отрисовыватся в разных местах в разное время, цель вопроса именно в сокращении и удобстве кода)
    – user298256
    31 июл 2019 в 7:54
4

Можно решить примерно так. В 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);
}
1
  • Спасибо, вы тоже подсказали интересное решение
    – user298256
    31 июл 2019 в 7:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.