JavaScript image.onload会生成无限循环

Question

我的情况是我需要使用具有两种不同功能的用户提供的图像。

1. 获取用户输入
2. 处理图像并将其重新处理

注意：为简洁起见，代码不完整且缩短。请不要指出无关紧要的内容。

1。获取用户输入

var fReader = new FileReader();
fReader.onload = function(e){

    image        = new Image();
    image.onload = function(){

          //BEGIN OF RELEVANT SECTION
          processOnCanvasAndBack(image, myCallbackToProceed);

    };

    image.src       = e.target.result;
};

fReader.readAsDataURL(src);

2。处理图像并将其重新处理

function processOnCanvasAndBack(image) {
    var canvas = $('<canvas></canvas>');
    canvas.draw(image);
    canvas.doSomeStuffLikeRotatingAndColorBalance();

   //BEGIN OF RELEVANT SECTION
   image.onload = function() {
      myCallbackToProceed();
   };

   image.src = canvas.toDataURL();
}

问题

1 中的image.onload按预期调用该函数，但是当我从 2 调用第二个image.src时，第一个{{1}再次调用，再次调用 2 并且...... booooom，无限循环（控制台吐出image.onload）

我尝试用too many recursions在各个点重置第一个调用，但它不能解决问题（不再有递归，但函数只是停止被调用）。现在我没有想法： - （

Answer 1

我建议创建两个图像对象。一个用于源图像，另一个用于转换/目标图像。通过在onload事件中重复设置同一图像对象的.src，可以避免改变现有状态并导致无限循环。尽可能避免变异状态。我还建议使用var关键字在本地而不是在全局范围内定义变量。

var fReader = new FileReader();
fReader.onload = function(e){

    var sourceImage = new Image();
    var targetImage = new Image();

    sourceImage.onload = function() {
        //BEGIN OF RELEVANT SECTION
        processOnCanvasAndBack(sourceImage, targetImage, myCallbackToProceed);
    }

    sourceImage.src = e.target.result;
};
fReader.readAsDataURL(src);

function processOnCanvasAndBack(sourceImage, targetImage, callback) {
    var canvas = $('<canvas></canvas>');
    canvas.draw(sourceImage);
    canvas.doSomeStuffLikeRotatingAndColorBalance();

   // BEGIN OF RELEVANT SECTION
   targetImage.onload = function() {
      callback();
   };

   targetImage.src = canvas.toDataURL();
}