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

Multiple Images displaying last image with dynamically created canvas and assigning to images

本文关键字：图像 最后一个 分配 创建 显示 动态      更新时间：2023-09-26
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-----");
            })
        }

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

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

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];
相关文章：