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

我在单个页面中有多个图像我正在尝试创建动态画布并将图像高度和宽度设置为它，以便我可以对图像进行一些注释。但我的最后一张图片每次都会显示，或者什么也没有显示。感谢Anyhelp。

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

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

1 个答案: