多张图片显示动态创建的最后一张图片 canvas 并分配给图片

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

我在单个页面中有多个图像我正在尝试创建动态 canvas 并为其设置图像高度和宽度，以便我可以在图像上做一些注释。但是每次都会显示我的最后一张图片，或者什么都不显示。感谢任何帮助。

Answer 1

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

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

您还应该将 canvas 大小设置移动到处理程序内部，因为未完全加载的图像没有 width/height（它在您的系统上工作只是因为图像在浏览器缓存中).

要解决最后一个图像问题，请在处理程序中使用 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];

多张图片显示动态创建的最后一张图片 canvas 并分配给图片

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

javascript

canvas

image

html5-canvas