前端二进制学习（一）

2018年11月14日Web前端0

由于常年兼容低版本ie，在h5中新出的数据格式上有了明显的落后，特弥补下知识。

一、blob

blob数据的话，在老东家处理图片时有接触过，但毕竟只是修改了几个bug，并没有完全的掌握。

看句来自MDN上的解释，Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

Blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据，我们不可以直接操作他，具体操作看第二篇。

Blob(blobParts[, options])，

  • blobParts，数据序列，格式可以是ArrayBuffer，ArrayBufferView，Blob，DOMString 。
  • options，包含以下两个属性的对象，type：MIME的类型。endings： 决定第一个参数的数据格式。默认值为"transparent"。

下面我们简单的去操作下二进制数据。blob的其他信息可以查看下MDN文档。

二、FileList与File

先在找张图片复制到桌面上，然后我们用type是file去取这个文件。

<body>
    <input type="file" id="rFile" />
</body>
let files = null;
document.getElementById('rFile').onchange = e => {
    files = e.target.files;
};
// 也可以使用，document.getElementById('rFile').files 获取当前选择的文件信息

此时的files就是FileList类型，他包含了刚才选中的图片的信息。

注：当给input增加multiple属性时，可以选择多个文件。

files instanceof FileList;    // true
files[0] instanceof File;     // true

而包含的file就是File类型的实例。所以files[0]的原型就是File，那么File的原型是谁呢？

files[0].__proto__.__proto__;   // Blob {...}

所以，File是继承了Blob的方法的，我们可以简单的使用slice将File转化成Blob。

Blob.slice([start,[ end ,[contentType]]])，返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。

files[0].slice(0);  // Blob

这个图片的数据，我们可以用来做什么呢？

三、数据处理

在页面上显示这张图片

语法：

objectURL = URL.createObjectURL(blob);

假如页面上有个img元素（js创建也行，这简单举例），我们可以将这个url赋值给img的src，这样图片就可以在页面上显示了。

<img src="" alt="" id="pImg" />
var source = URL.createObjectURL(files[0]);
document.getElementById('pImg').src = source;

此时，图片可以正常显示了，看下对应img的src路径，发现是以blob:开头的。

MDN文档上，该方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

注：MDN提示，当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

与base64互转

blob转base64格式

我们都直到图片是可以用base64来表示的，那么blob是否能转化成base64数据呢？

function blobToDataURL(blob) {
    var reader = new FileReader();
    reader.readAsDataURL(blob); // 读取文件
    reader.onload = function (e) {
        var data = e.target.result; // base64的数据结果
    }
}

FileReader又是啥？这个后面再讲。

base64转blob

正向能转，那么倒着同样可以转化，

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

Uint8Array又是啥？我们后面再学习。

四、总结

blob是js的一种对象类型，我们可以用他存储大量的二进制数据，他本身的属性有两个，分别是：size 和 type ，在原型中有个方法：slice()。我们可以通过file或fileList获得blob数据，那我们如何操作与处理这些二进制数据呢？请看前端二进制学习（二）。

JavaScript前端二进制纯原创

目录