Javascript JS multiselect图像并将其绘制到画布中-有时画布空白或绘制相同的图像

我正在使用JS和一个多选字段

用户可以从文件夹中选择多个图像，然后将每个图像绘制到画布中。每个图像都有一个预定义的画布和一个预定义的输入字段，然后将解码的base64 dataurl放在其中

多选字段：

<input id="bild" multiple="" name="bild" type="file">

对于每一张图片，我都会检查它是否真的存在并且没有定义。然后将其绘制到画布中，并用dataurl填充dataurl的相应字段

问题是：

我没有得到任何错误

不同图像集的行为不同，但同一图像集的行为总是相同的。例如：我在要上载的文件夹中标记了3个不同的图像，但所有3个画布始终显示相同的图像（第3个），其中一个也是所有3个数据URL都相同

有时有些画布是空白的

有时它是有效的

---

---

这似乎是一个普遍的问题，但我还没有找到发生这种情况的原因我猜它可能与图像的onload函数有关，并且dataurl是在相同的步骤中创建的。数据URL本身长得惊人。我在看这个自动取款机。也许这里有人有主意。

我发现了这个问题。

img

导致了这些问题。因为我总是使用相同的

img

，即使它位于

if条件块中。函数本身似乎比if条件更强

我必须为每个选定的图像创建一个新的img变量，这意味着我需要为图像1创建一个新的img变量：

var img1 = document.createElement("img");
img1.src = window.URL.createObjectURL(this.files[0]);

$( img1 ).load(function() {

//...

ctx.drawImage(img1, 0, 0, width, height);

});

对于图2：

var img2 = document.createElement("img");
img2.src = window.URL.createObjectURL(this.files[1]);

$( img2 ).load(function() {

//...

ctx.drawImage(img2, 0, 0, width, height);

});

对于图3：

var img3 = document.createElement("img");
img3.src = window.URL.createObjectURL(this.files[2]);

$( img3 ).load(function() {

//...

ctx.drawImage(img3, 0, 0, width, height);

});

var img3 = document.createElement("img");
img3.src = window.URL.createObjectURL(this.files[2]);

$( img3 ).load(function() {

//...

ctx.drawImage(img3, 0, 0, width, height);

});