Question

这是一个特定的问题，因此我将尽力解释。

我的页面上只有一块画布。用户上传从同一摄像机角度拍摄的一批文件。画布显示图像之一，并且用户以描绘关注区域的方式绘制图像。然后，程序会越过这个感兴趣的区域，并从该区域内的像素中提取相关的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_num=0; image_num<fileUpload.files.length; image_num+=1){
    imgData = context.getImageData(0,0,canvas.width,canvas.height);
    data = imgData.data;

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

    readNextImage(image_num);
}

我希望问题解决了，让我知道是否有什么令人困惑的地方。

Answer 1

编辑2：

链接到有关承诺的文章：promises 1 promises 2 promises 3

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

    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]);
  }
}

问题可能出在这里（先前的图像仍附加在画布上）：

canvas.add(img);

请尝试删除前一个孩子，然后再用以下行替换该行来添加另一个孩子：

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

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

1 个答案: