前端二进制学习(一)

2018年11月14日Web前端

由于常年兼容低版本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数据,那我们如何操作与处理这些二进制数据呢?请看前端二进制学习(二)