Question

我需要在将选择的图像发送到服务器之前显示它。我需要图像的宽度和高度。

Blob vs FileReader。我做过一些研究，但我想确保没有错过任何重要的事情，我会用最好的方法。

Blob对象表示不可变的原始数据的类文件对象。 Blob表示不一定是JavaScript本机格式的数据。 File接口基于Blob，继承blob功能并将其扩展为支持用户系统上的文件。

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。

console.time("blob");
var img = new Image;
img.onload = function()
{
    $("img").attr("src", this.src);
    console.timeEnd("blob");
    doSomething(this.width, this.height);
    window.URL.revokeObjectURL(img.src);
}
img.src = window.URL.createObjectURL(file);


console.time("filereader");
var reader = new FileReader();
reader.onload = function(e)
{
    var img = new Image;
    img.src = e.target.result;
    img.onload = function()
    {
        $("img").attr("src", this.src);
        console.timeEnd("filereader");
        doSomething(this.width, this.height);
    }
    reader.readAsDataURL(file);
}

结果（测试图像为14850x8000,6.41 MB）：

            Firefox 39  Chrome 44   Opera 30    Internet Explorer 11
Blob        249ms       47ms        65ms        81ms
FileReader  2517ms      3693ms      2191ms      2679ms

两者都异步加载图像。
两次杀死浏览器几秒钟（Web Workers ftw）。
只有FileReader会直接返回内容（我现在不需要）。
虽然测试显示Blob比FileReader快25倍，但实际上它只快了1.5 / 2倍（从选择文件到我看到文件的时间）加载的图像为Blob为~4s，Firefox为FileReader为~6s。
在Firefox中，如果我显示图像，并且我在5分钟内执行其他操作，则返回到该网站，两个图像都将为黑色。
所有主流浏览器都支持这两种浏览器（我不需要readAsBinaryString）。

Previev图片：Blob或FileReader？

0 个答案: