移动端照片上传、头像裁剪完整功能，兼容iphone,android (二)：base64、blob相关知识点

在上一篇照片上传博文中（https://www.cnblogs.com/lichunyan/p/8290004.html）有一段关于base64转blob的代码，弄懂这篇讲的，

那段代码也就一目了然了。

一：base64、atob、btoa

       Base64是常见的用于传输8Bit的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是

从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。Base64编码具有不可读性，需要解码后才能阅读。

      1.使用atob()方法解码base64形式的编码字符。

         该方法解码由btoa()编码的字符。

      2.使用btoa()方法使字符编码成base64的形式。

        该方法使用"A-Z", "a-z", "0-9", "+", "/" 和 "="字符进行编码。

        该方法的编码由atob()解码。

二：blob

       BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。

      创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以

调用canvas对象上的toBlob方法。

new Blob(
  [可选] Array parts,
  [可选] BlobPropertyBag properties
);
例如：

var myBlob= new Blob(arrayBuffer);
其中，两个参数的含义是：

parts
一个数组，包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString对象。
properties
一个对象，设置Blob对象的一些属性。目前仅支持一个type属性，表示Blob的类型。

　　有了以上的知识，再来看看代码：

 function b64toBlob(b64Data, contentType, sliceSize) {
        // 文件类型
        contentType = contentType || '';
        //  文件分割的大小，一般上传文件512
        sliceSize = sliceSize || 512;
        // 解码base64
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
        //  构造blob的第一个参数数据
        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
        // 创建blob
        var blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }