javascript - blob 垃圾收集问题

Question

我正在尝试使用kartik@的html5文件输入功能上传大量图像。我希望最终用户在上传之前不必调整图像大小，因此我使用resizeImage 选项@。我在上传大文件(每个 3-4MB)时遇到问题。

我已经修改了 fileinput.js 以用调整大小的 blob 替换预览图像，但是我的浏览器 (Chrome 48.0.2564.103 m) 仍然在 F12 -> 资源 -> ... - 中列出原始(大文件大小)blob > 图像文件夹。当上传数百张图片时，浏览器最终会耗尽内存并崩溃。

我在 fileinput.js 的“self”对象中找不到对原始/大 blob 的任何引用，因此我不知道如何收集这个未使用的 blob 垃圾。

jsfiddle of issue/link to modified fileinput.js (修改:2396-2412)

                   setTimeout(function(d) {
                    console.log('attempting to replace original blob with:');
                    console.log(blob);
                    console.log(objUrl.createObjectURL(blob));
                    console.log('attempting to revoke original blob: ' + image.src);
                    objUrl.revokeObjectURL(image.src);
                    delete image.src;
                    self.clearDefaultPreview();
                    image.src = objUrl.createObjectURL(blob);
                    console.log('outputting fileinput.js self var:');
                    console.dir(JSON.stringify(self));
                    console.dir(self);

                }, 500);
            }, type, self.resizeQuality);

            console.log('current image.src blob is: ' + image.src);

@我没有发布两个以上链接的声誉，因此我在 jsfiddle 上的 javascript 框架内嵌入了插件文档的链接。

任何帮助将不胜感激。

Answer 1

我弄清楚发生了什么，文件输入脚本直到所有图像都预加载后才调整 blob 的大小。将其修改为一次处理每个图像后，我的性能在处理如此大的图像时达到了预期的效果 - 谢谢大家的评论。