顯示多個縮略圖不能正常工作

用戶可以將圖像拖放到該區域，並且將該區域上放置的所有jpeg顯示爲縮略圖。我做了一個所有jpeg列表，這些列表掉落在該區域，並且工作正常。現在每次將新的jpeg添加到該列表中時，我想將所有jpeg顯示爲尺寸爲100x150px的縮略圖。

這是我的代碼。這裏是一個喜歡小提琴http://jsfiddle.net/cJkYj/2/

function displayThumbnailes() { 
    //Clear the div. 
    var outerDiv = document.getElementById('fileChooserDiv'); 
    while (outerDiv.hasChildNodes()) { 
     outerDiv.removeChild(outerDiv.lastChild); 
    } 
    var div = document.createElement('div'); 
    outerDiv.appendChild(div); 
    //Go over the Files and add Thumbnails for all jpegs. 
    for(var i = 0; i < files.size(); i++) { 
     if(files.get(i).type == "image/jpeg") {  
      var reader = new FileReader(); 
      reader.onloadend = function() { 
       var result = reader.result; 
       displayThumbnail(result, div); 
      } 
      reader.readAsDataURL(files.get(i)); 
     } 
    } 
} 

function displayThumbnail(src, div) { 
    var img = new Image(); 
    img.onload = function() { 
     var cv = document.createElement('canvas'); 
     cv.style.border = "1px solid #ffffff"; 
     cv.width = 100; 
     cv.height = 150; 
     var ctx = cv.getContext("2d"); 
     ctx.drawImage(img, 0, 0, 100, 150); 
     div.appendChild(cv); 
    } 
    img.src = src; 
}

我的問題：我相信這個代碼將顯示所有thumbnailes在div的領域，但我只看到最後一個。

這看起來像我搞亂了一些同步或什麼。「文件」是一個對象，用於管理在「放置區域」上拖動的文件。我希望每個縮略圖都有自己的畫布，以便以後可以向他們添加一個onclick事件。

任何幫助將appriciated ^^

來源

2013-08-19 H_end-rik

你能提供一個jsfiddle嗎？爲什麼要將縮略圖放在畫布內？您也可以將「onclick」事件添加到「普通」html元素。 –

使用Canvas的最大原因是我之前和canvas一起工作，並且知道我的方式。我想調整圖像到一定的尺寸。那麼可能可能使用了「IMG」 - 元素^^ –

圖像是從另一個div內的頁面拖動，還是從用戶本地硬盤拖動並丟棄在頁面上？ – surfmuggle

您的代碼：

reader.onloadend = function() { 
    var result = reader.result; 
    displayThumbnail(result, div); 
} 
reader.readAsDataURL(files.get(i));

是因爲異步onloadend回調的失敗。每次通過循環更新外部reader變量，因此每個事件僅使用最後一個參考。

您既可以更改您的代碼來包裝在一個封閉：

(function(reader) {    
    reader.onloadend = function() { 
     var result = reader.result; 
     displayThumbnail(result, div); 
}})(reader);

或（首選）更改您的代碼使用事件的具體數據：

reader.onloadend = function(evt) { 
    var result = evt.target.result; 
    displayThumbnail(result, div); 
};

- 或使用的onload -

reader.onload = function (evt) { 
    var result = evt.target.result; 
    displayThumbnail(result, div); 
} 
reader.readAsDataURL(files.get(i));

作品：example

我還應該注意到我重新安排了你的代碼，以便在onload處理程序中完全運行。

來源

2013-08-19 20:37:46 dc5

感謝您的幫助，它的工作很棒。我似乎有誤解，也許你可以幫助我。在我最初的代碼中，我想知道每個循環都會創建一個閱讀器的新實例，並且這樣不會有你描述的問題。我認爲每個讀者創建的onload會是一個獨立的功能。那麼將不得不閱讀一下。 –

這是一個容易犯的錯誤 - 不時地咬人。看看第一個例子 - 它將讀者作爲參數傳遞，所以內部回調將自己的本地副本作爲參考。但是肯定會碰到關閉，循環和範圍的書。鉤住編輯器的好linter（jshint或其他）可以幫助儘早捕捉這些類型的錯誤。 – dc5

感謝你從現在開始使用棉絨。他們之前沒有真正談論過他們。 –

顯示多個縮略圖不能正常工作

回答

相關問題