Question

我正在进行图像多重上传，这听起来不错，但是......一如既往的内存问题。

脚本目标是在上传100多张图像（300Mb +）后继续存在。所以，如果您发现（我仍然是javascript蹩脚）任何问题，请给我一个建议。感谢。

我的代码：

CFileReader.prototype.proccessFile = function(cb) {
    // this means File
    var reader = new FileReader();
    reader.readAsDataURL(this);
    reader.onload = (function (f) { 
        return function(e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = (function(f) {
                return function() {
                    var maxWidth = 700,
                        maxHeight = 700,
                        imageWidth = this.width,
                        imageHeight = this.height;

                    if (imageWidth > imageHeight) {
                      if (imageWidth > maxWidth) {
                        imageHeight *= maxWidth / imageWidth;
                        imageWidth = maxWidth;
                      }
                    }
                    else {
                      if (imageHeight > maxHeight) {
                        imageWidth *= maxHeight / imageHeight;
                        imageHeight = maxHeight;
                      }
                    }
                    var canvas = document.createElement('canvas');
                    canvas.width = imageWidth;
                    canvas.height = imageHeight;

                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
                    if(typeof cb == 'function') {
                        cb(f,canvas.toDataURL());
                    }
                    delete canvas;
                    delete ctx;
                    return;
                }
            })(f);

        };
    })(this);    
}

Answer 1

我认为window.createObjectURL比FileReader更快，你应该同时使用backRe for filereader ...你也可以检查每个操作的性能，因为每个浏览器存在差异，例如http://jsperf.com/canvas-image-resizing 并且不要因为记忆原因而忘记撤销ObjectURL ...你也可以是webworkers http://www.html5rocks.com/en/tutorials/file/filesystem-sync/#toc-readingsync

    if("createObjectURL" in window || "URL" in window && 
    "createObjectURL" in window.URL || "webkitURL" in window && 
    "createObjectURL" in window.webkitURL) { 
        if("createObjectURL" in window) { 
            // Chrome exposes create/revokeObjectURL directly on window 
            objURL = window.createObjectURL(file); 
        } else if("webkitURL" in window) { 
            // Chrome exposes create/revokeObjectURL on the new  webkitURL API 
            objURL = window.webkitURL.createObjectURL(file); 
        } else { 
            // FF4 exposes create/revokeObjectURL on the new URL API 
            objURL = window.URL.createObjectURL(file); 
        } 

        // RESIZE image 
        // STORED IN    
        // objURL
} else { 
    // fallback to FileReader for FF3.6             
    reader = new FileReader();
    reader.onload =  function(event) {                                                                  
        // RESIZE image 
        // STORED IN    
        // event.target.result                 
    }

    reader.onprogress = function (evt) {
       if (evt.lengthComputable) {
            var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
            console.log(percentLoaded);
       }
    }
    reader.readAsDataURL(file);                                                                 
}

Answer 2

好的，那几天的谷歌搜索，很多小时都找到了最好的解决方案。（不是最好的，但最好的，我可以搞清楚）。如果有人做得更好，就给它答案，或者只是给出不好的声誉。

目标一：将所有内容存储在全局空间（画布，阅读器，画布上下文，图像）

window.reader = new FileReader();
window.canvas = document.createElement('canvas');
window.image = new Image();
window.ctx = window.canvas.getContext("2d");

目标二：使用canvas.toBlob方法（现在只在Firefox中实现，你需要一些polyfill）

目标三：添加一些等待，这我不能只是确定地解释，它只是经验。目标是允许浏览器在调用之间调用垃圾收集器。

所以我的上一个开发脚本是：

window.prepareFile = function (index,cb) {
    // this means file html element
    var res = window.configuration.photo.resolution.split(":");

    //var res = [300,200];
    var reader = window.reader;
    $('#fm-up-status > tr[for="'+this.files[index].name+'"]').children('td')[3].innerHTML = 'Zpracovávám';
    reader.readAsDataURL(this.files[index]);
    reader.onload = (function (f) { 
        return function(e) {
            setTimeout(function(){
                var image = window.image;
                image.src = e.target.result;
                image.onload = (function(f) {
                    return function() {
                        var maxWidth = parseInt(res[0]),
                            maxHeight = parseInt(res[1]),
                            imageWidth = this.width,
                            imageHeight = this.height;
                        if (imageWidth > imageHeight) {
                            if (imageWidth > maxWidth) {
                              imageHeight *= maxWidth / imageWidth;
                              imageWidth = maxWidth;
                            }
                        }
                        else {
                            if (imageHeight > maxHeight) {
                              imageWidth *= maxHeight / imageHeight;
                              imageHeight = maxHeight;
                            }
                        }
                        var canvas = window.canvas;
                        canvas.width =0;
                        canvas.width = imageWidth;
                        canvas.height = imageHeight;
                        window.ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
                        canvas.toBlob(
                            function (blob) {
                                var formData = new FormData();

                                formData.append('file', blob, f.name);
                                cb(f.name,formData);
                            },
                            'image/jpeg'
                        );
                        return;
                    }
                })(f);
                return;
            },500);
        };
    })(this.files[index]);

    return;
}

然后您可以像普通表格（倍数）一样简单地上传数据，如下所示：

window.uploader = function(filename,formdata,cb) {

    $('#fm-up-status > tr[for="'+filename+'"]').children('td')[3].innerHTML = 'Uploaduji';
    xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (evt) {
            if (evt.lengthComputable) {  
                var floatComplete = evt.loaded / evt.total;
                window.uploadProgress(filename,floatComplete);

            }
        }, false);
    }  
    provider = function () {
        return xhr;
    };    
    $.ajax({
        url: window.uploadUri,
        type: "POST",
        data: formdata,
        xhr: provider,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (res,state,xhr) {
            cb(false,res,xhr);
            return;
        },
        error: function (xhr, state, err) {
            cb(err,false,xhr)
            return;
        }
    });    
};

这段代码真的不是生产就绪的，它是一个简单的概念验证

FileReader，图像和<canvas> </canvas>的高JavaScript内存使用率

2 个答案: