javascript - 图像拼接脚本

Question

大家。我正在尝试编写一个脚本，该脚本会在 Canvas 上连续呈现来自文件输入的图像。

首先，我循环浏览图像以计算 Canvas 宽度(因为 Canvas 在调整大小时被删除)。然后再次循环渲染图像。

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 .我使用文本输入而不是文件，当它是最后一张图像时进行绘制，否则调整 Canvas 大小会导致 Canvas 重置，从而丢失之前的绘制。

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>