循環：圖像僅落在最後一個字段

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：https://jsfiddle.net/eh6pr7ee/2/

處理圖像...

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