Скрипт конкатенации изображений

Question

все.Я пытаюсь написать скрипт, который рендерил бы изображения из файловых вводов на холсте в ряд.

Сначала я циклически перебираю изображения, чтобы вычислить ширину холста (потому что холст стирается при изменении размера).Затем снова выполните цикл для рендеринга изображений.

canvas.width = 0;
let x = 0,
    y = 0,
    totalWidth = 0;
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
  let input = document.querySelectorAll(".has-file")[i];
  let image = input.files[0];
  let img = new Image();
  console.log(img);
  img.src = window.URL.createObjectURL(image);
  img.addEventListener('load', () => {
    console.log(img);
    let newWidth = img.width * canvas.height / img.height;
    totalWidth += newWidth;
    canvas.width = totalWidth;
  }, false);
};
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
  let input = document.querySelectorAll(".has-file")[i];
  let image = input.files[0];
  let img = new Image();
  img.src = window.URL.createObjectURL(image);
  img.addEventListener('load', () => {
    let newWidth = img.width * canvas.height / img.height;
    ctx.drawImage(img, x, y, newWidth, canvas.height);
    x += newWidth;
  }, false);
};

}

Приложение ведет себя странно, изображения не всегда отображаются, а когда это происходит, не всегда, где они должны быть.

Answer 1

Первая проблема с кодом заключается в том, что вы загружаете изображения дважды, а случайность связана с тем, что загрузка изображений может быть неоднозначной.Проверьте это jsfiddle .Я использовал ввод текста вместо файлов, рисование происходит, когда оно является последним изображением, в противном случае изменение размера холста может привести к сбросу холста и потере предыдущего рисунка.

var canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {
		antialias: false,
		depth: false
	});
canvas.width = 0;
let x = 0,
    y = 0,
    totalWidth = 0;
    let obj = [];
    let k = 0;
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
  let input = document.querySelectorAll(".has-file")[i];
  let image = input.value;
  let img = new Image();
  img.src = image;//window.URL.createObjectURL(image);
  img.addEventListener('load', () => {
    console.log(img);
    let newWidth = img.width * canvas.height / img.height;
    totalWidth += newWidth;
    canvas.width = totalWidth;
    obj.push({img: img, x: x, y: y, newWidth: newWidth, height: canvas.height});
    k++;
    x += newWidth;
    if (k == document.querySelectorAll(".has-file").length )
    	draw();
  }, false);
};

function draw() {
  for (var i = 0; i < obj.length; i++) {
      ctx.drawImage(obj[i].img, obj[i].x, obj[i].y, obj[i].newWidth, obj[i].height);
  }
}

<input style="display: none;" class="has-file" value="https://i.imgur.com/I86rTVl.jpg" />
<input style="display: none;" class="has-file" value="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

<canvas id="canvas"></canvas>