Question

我对循环有点问题。我正在构建一个小工具，用户必须上传12个图像。图像以矩形裁剪并放置在按钮上。我几乎准备好了，但不知何故，循环不能很好地运作。所有图像都落在最后一个按钮上。这可能在循环中有问题吗？

JS / JQuery的：

for (var i = 0; i < 12; i++) {
    var j=i+1;
    var reader = new FileReader();
    reader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;

        img.onload = function () {

            var getimage= '#getimage'+j;

            // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
            var canvas = document.createElement("canvas");

            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            var posh, posw;
            var factheight=img.height;
            var factwidth=img.width;
            if(factwidth<factheight){
                canvas.width = img.width;
                canvas.height= img.width;
                posh=(img.height-img.width)/2;
                posw=0;
            }
            else if(factheight<factwidth){

                canvas.height = img.height;
                canvas.width = img.height;
                posh=0;
                posw=(img.width-img.height)/2;
            }
            else{
                canvas.width = img.width;
                canvas.height= img.height;
                posh=0;
                posw=0;
            }
            ctx.drawImage(img, posw, posh, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

            var cropped=canvas.toDataURL("image/png");

            $(getimage).attr("src",cropped);     // SHOW THE IMAGES OF THE BROWSER.
        }
    }

    reader.readAsDataURL($('.multiupload')[0].files[i]);

 }

这里还有JSFiddle的链接。感谢您的帮助，因为我并不确切知道reader.readAsDataURL($('.multiupload')[0].files[i]);和target.result的工作原理

Answer 1

我猜测你的循环在任何图像完全加载之前已经完成，所以j在用于查找相关按钮之前将是11。尝试更改

img.onload = function () { .... }

到

img.onload = myFunction(id)

然后使用输入参数将内联函数中的所有内容移动到其自己的函数中。然后将j作为id参数传递。

Answer 2

我为你做了一个例子。正如我在评论中所说的那样

var reader = new FileReader();
reader.onload = (function(j){return function (e) {
var img = new Image();
...

https://jsfiddle.net/ykze3f9r/

Answer 3

代码的主要问题是j变量。由于for循环的工作方式，它始终设置为最后一个数字。你必须绑定该数字。我分成了单独的函数，以便于阅读。这是工作中的JSFiddler：{{3}}

处理图片......

var processImg = function( img, imgNum ) {
  var getimage= '#getimage' + imgNum;
  // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
  var canvas = document.createElement("canvas");

  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  var posh, posw;
  var factheight = img.height;
  var factwidth = img.width;
  if (factwidth < factheight) {
    canvas.width = img.width;
    canvas.height = img.width;
    posh = (img.height-img.width)/2;
    posw = 0;
  }
  else if (factheight < factwidth) {
    canvas.height = img.height;
    canvas.width = img.height;
    posh = 0;
    posw = (img.width-img.height)/2;
  }
  else {
    canvas.width = img.width;
    canvas.height= img.height;
    posh = 0;
    posw = 0;
  }
  ctx.drawImage(img, posw, posh, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  var cropped = canvas.toDataURL("image/png");
  $(getimage).attr("src",cropped); // SHOW THE IMAGES OF THE BROWSER.
};

创建图像并设置源...

var setImage = function( imgNum, e ) {
  var img = new Image();
  img.src = e.target.result;
  img.onload = processImg.bind( this, img, imgNum );
};

为图片上传创建处理函数...

var handleImageUploads = function() {
  if (parseInt($(this).get(0).files.length) > 12 || parseInt($(this).get(0).files.length) < 12) {
    alert("Please upload 12 photos");
  }
  else {
    //loop for each file selected for uploaded.
    for (var i = 0; i < 12; i++) {
      var reader = new FileReader();
      reader.onload = setImage.bind( this, i+1 );
      reader.readAsDataURL($('.multiupload')[0].files[i]);
    } // for
    console.log("done");
    $('body').removeClass("loading");
  }; // else
}

绑定处理程序函数。

$('.multiupload').on("change", handleImageUploads);

循环：图像仅落在最后一个字段上

3 个答案: