Javascript 使用一个画布从多个图像获取数据

这是一个具体的问题，所以我将尽我所能解释它

我的页面上只有一块画布。用户上传从同一摄像机角度拍摄的一批文件。画布显示其中一个图像，用户以描绘感兴趣区域的方式绘制图像。然后，该程序遍历该感兴趣的区域，并从该区域内的像素中提取相关RGB数据

现在，我遇到了一个问题，那就是将画布切换到下一个图像来处理该图像。我仍然将感兴趣的区域指定为区域内的索引数组。但是，当试图从其余的图像中获取RGB数据时，它只提供关于第一幅图像的信息

下面是一些相关的代码片段及其函数

此函数用于将文件中的下一个图像上载到画布

function readNextImage(i) {
  if (fileUpload.files && fileUpload.files[i]) {
    var FR = new FileReader();
    FR.onload = function(e) {
      fabric.Image.fromURL(e.target.result, function(img) {
        img.set({
          left: 0,
          top: 0,
          evented: false
        });
        img.scaleToWidth(canvas.width);
        img.setCoords();
        canvas.add(img);
      })
    };
    FR.readAsDataURL(fileUpload.files[i]);
  }
}

此代码段加载包含图像数据的数组

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imgData.data;

因此，目前，我能够通过'数据'的第一次，并获得相关的RGB信息，我需要。完成后，我调用readNextImage（）函数，将其加载到画布中，然后再次调用

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imgData.data;

希望用新值加载数组。这就是它似乎失败的地方，因为值与上一次迭代相同

程序是否有可能在加载画布和新图像以及尝试获取新数据值之间没有足够的时间？画布上还有什么我不知道的东西吗

这里是我实际调用readNextImage（）函数的地方

for（var image\u num=0；image\u num）
编辑2：

有关承诺的文章链接：

编辑：使用为每个图像实例创建的本地画布，而不是使用全局画布：

    for (var image_num=0; image_num<fileUpload.files.length; image_num+=1){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    readNextImage(image_num,canvas);
    imgData = context.getImageData(0,0,canvas.width,canvas.height);
    data = imgData.data;

    /*Lines of code that parses through the data object specified above*/
    }


function readNextImage(i,canvas) {
  if (fileUpload.files && fileUpload.files[i]) {
    var FR = new FileReader();
    FR.onload = function(e) {
      fabric.Image.fromURL(e.target.result, function(img) {
        img.set({
          left: 0,
          top: 0,
          evented: false
        });
        img.scaleToWidth(canvas.width);
        img.setCoords();
        canvas.add(img);
      })
    };
    FR.readAsDataURL(fileUpload.files[i]);
  }
}

尝试删除上一个子项（ren），然后再添加另一个子项，方法是将该行替换为：

while (canvas.firstChild) {
  canvas.removeChild(canvas.firstChild);
}
canvas.add(img);
canvas.getContext("2d").drawImage(img, 0, 0);

只是做了一次尝试，但似乎不起作用。执行
var imgData=context.getImageData（0,0，canvas.width，canvas.height）；var data=imgData.data；
应该只抓取画布内容，而不应该关心存在或不存在哪些层。不过值得一试。谢谢。您是否进行了调试和检查以确保图像文件的文件名不同？当我运行该函数时，我可以看到画布在我上传的各种图像中快速循环，所以我很有信心这些图片上传正确。你能编辑并显示更多的源代码吗？特别是你调用readNextImage（）的部分我刚刚用调用函数的部分编辑了原始帖子
canvas.add(img);

while (canvas.firstChild) {
  canvas.removeChild(canvas.firstChild);
}
canvas.add(img);
canvas.getContext("2d").drawImage(img, 0, 0);