html5在上传大图片时崩溃

Question

下面代码中的问题是，当我想显示40个大图像的缩略图时。 Windows中的firefox正在崩溃，因为cpu使用量增加，而在其他之后加载一个图像。我知道它因为加载完整大小的图像（大约9000 Kb）。有什么方法只是为了显示缩略图而不是在html5中加载完整大小。 ..

dropbox.addEventListener（“drop”，dropUpload，false）;

function dropUpload（event） {

空操作（事件）; var dropMethod = event.dataTransfer;

var classicMethod = event.target;

var filesDone =0;

var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
function next() {
    if (filesDone < dropedFiles.length) {
        addFileThumbnails(dropedFiles[filesDone++], next);
    }
}
// do the first one
next();

}

function addFileThumbnails（file，doneCallback）{

var li = document.createElement("li"),
div = document.createElement("div"),
img,
progressBarContainer = document.createElement("div"),
progressBar = document.createElement("div"),
tBody;
li.appendChild(div);

progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBar.setAttribute("id", "proBar_" + (indexN++));
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
var reader = new FileReader();
reader.onerror = function(event) {
    alert("couldn't read file "
            + event.target.error.code);
};
// Present file info and append it to the list of files

if (reader !== "undefined" && (/image/i).test(file.type)) {
    img = document.createElement("img");
    img.setAttribute("class", "thumb");
    img.setAttribute("id", "img_" + (indexN++));
    reader.onload = (function (img) {
        return function (evt) {
            img.src = evt.target.result;
            doneCallback();
    };

    }(img));
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    img.onload= function(){
      ctx.drawImage(img,100,100)
    }
}

reader.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        progressBar.style.width= (evt.loaded / evt.total) * 100 + "%";
    }

}, false);

// File uploaded
reader.addEventListener("load", function () {
    progressBarContainer.className += " uploaded";
    progressBar.innerHTML = "";
}, false);

fileInfo = "Name:" + file.name + "</br>";
fileInfo += "Size:" + parseInt(file.size / 1024, 10) + " kb</br>";
fileInfo += "Type:" + file.type;
div.setAttribute("id", "desc_" + img.id.substring(4));
div.innerHTML = fileInfo;


tBody = getTableBodyLayout(img,li);
document.getElementById("images_table").appendChild(tBody);
moveScrollbar();

}