base64blob格式相互转换及应用

Posted 2021-09-18 龖龖龖

1.Base64 to Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), //分割为数组，分割到第一个逗号
    let mime = arr[0].match(/:(.*?);/)[1],//获取分割后的base64前缀中的类型
    let bstr = window.atob(arr[1]), 
    let n = bstr.length, 
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime//文件类型格式 });
}

2.Blob to Base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

3. 使用旧方法创建 Blob 对象。

1.旧的方法使用 BlobBuilder 来创建一个Blob 实例，并且使用一个 append() 方法，将字符串（或者 ArrayBuffer
或者 Blob，此处用 string 举例）插入，一旦数据插入成功，就可以使用 getBlob() 方法设置一个 mime 。

 var builder = new BolbBuilder();
    builder.append("Hello World!");
    var blob = builder.getBlob("text/plain");

4. 新方法创建Blob 对象

1.在新的方法中直接可以通过 Blob() 的构造函数来创建。
构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及
ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：
type – MIME 的类型。
endings – 决定 append() 的数据格式，（数据中的 \\n 如何被转换）可以取值为 “transparent” 或者
“native”（t* 的话不变，n* 的话按操作系统转换；t* 为默认） 。

 var blob = new Blob(["Hello World!"],{type:"text/plain"});

5.Blob 的应用

1. 大文件分割 (slice() 方法)slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。
2. 当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的 Blob 对象和原始的是独立存在的。
   不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他浏览器则正常的方式 slice() 。

可以写一个兼容各浏览器的方法：

function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
      if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
      } else {
          throw new Error("This doesn't work!");
      }
    }

小惊喜：base64、blob、file相互转换详解