Question

我使用以下代码加载和调整图片大小。

$(imagesToProcess.files).each(function (idx, file) {
                    var img = new Image();
                    img.onload = function (e) {
                        //var resized = _resizeImage(e.target);
                        URL.revokeObjectURL(e.target.src);
                    };
                    img.src = URL.createObjectURL(file);
                });

这段代码导致Chrome中存在巨大的内存峰值，即使我已经注释掉实际的大小调整。我做错了什么？

Answer 1

此代码基于this answer，为我解决了

                    var fileQueue = [];
                    var lock = false;
                    var img = new Image();
                    img.onload = function (e) {
                        URL.revokeObjectURL(e.target.src);
                        lock = false;
                    };

                    $(imagesToProcess.files).each(function (idx, file) {
                        fileQueue.push(file);
                    });

                    var processQueue = setInterval(processFile, 250);

                    function processFile() {
                        if (fileQueue.length == 0) {
                            console.log('nothing in queue');
                            clearInterval(processQueue);
                            return;
                        }
                        if (!lock) {
                            img.src = URL.createObjectURL(fileQueue.shift());
                            lock = true;
                        }
                    }

Answer 2

不要使用大量的匿名函数，而是使用函数的引用。

$(imagesToProcess.files).each(createImage);

function createImage(idx, file){
   var img = new Image();
       img.onload = imageOnload;
       img.src = URL.createObjectURL(file);
}
function imageOnload(e) {
    URL.revokeObjectURL(e.target.src);
}

在每个图像创建的代码中，创建一个函数对象实例。这就是导致代码中内存泄漏的原因。

Answer 3

我最终通过使用jpeg解码的另一种方法（使用库而不是浏览器的Image对象）解决了程序中的内存泄漏：https://stackoverflow.com/a/62584068/2441655

加载图像时内存泄漏

3 个答案: