使用动态创建的画布显示最后一张图像并分配给图像的多个图像

Question

function innerAjax(FILE_DIR,imgJPGList){
      var imgLength = imgJPGList.length;

      $("#imgID").empty();// This is a div
               if(imgLength!=0){
               img = [];
                for(i=0;i< imgLength;i++){
                // dir = FILE_DIR+"/"+imgJPGList[i];

                var canvasCreator = document.createElement("canvas");

                canvasCreator.id = imgJPGList[i].substr(0, imgJPGList[i].indexOf('.'));
                console.log("canvas id is---"+canvasCreator.id);

               var canvas = $(canvasCreator).get(0);

               var ctx = canvas.getContext('2d');

                img[i] = new Image();

                img[i].onload = function() {
                console.log("inside onload function");
                ctx.drawImage(img[i],0,0);
                }
                img[i].src = FILE_DIR+"/"+imgJPGList[i];
                canvas.width = img[i].width;
                canvas.height = img[i].height;

                $("#imgID").append(canvas);
                $("#imgID").append($("<br/>"));
                }
            }
            $(canvas).mouseover(function myDown(e)
            {
             console.log("mouseover-----");
            })
        }

我在一个页面中有多个图像我正在尝试创建一个动态画布并为其设置图像高度和宽度，以便我可以对图像进行一些注释。但是我的最后一张图片每次都会显示或没有显示。任何帮助表示赞赏。

Answer 1

您正在一个循环内执行异步操作，该操作很少按预期工作。

JavaScript 是单线程的，这意味着在循环结束之前不会调用 onload 处理程序中的代码，因此i 将始终是最后一个图像。

您还应该将设置画布大小移到处理程序内部，因为未完全加载的图像没有宽度/高度（它仅适用于您的系统，因为图像位于浏览器缓存中）。

要解决最后一个图像问题，请在处理程序中使用this，这将表示在该点加载的图像：

img[i] = new Image();
...

img[i].onload = function() {
  // at the time this gets called, the loop has finished

  // these need to be here as image won't have width/height until fully loaded
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = this.width;
  canvas.height = this.height;

  ctx.drawImage(this, 0,0);   // use this (= actual image loaded)
  // append canvas to DOM here etc....
}

img[i].src = FILE_DIR+"/"+imgJPGList[i];