base64,file,Blob和ArrayBuffer以及src之间的转换

本文部分内容因为不想手写所以借鉴了博客，如有需要请移步

一、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 });
}

二、Blob/file 转为base64

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

本人建议使用promise来完成，暂只有一个例子，其余方法也可使用promise的方式去完成：

new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("blobToBase64 error"));
        };
      }).then((res) => {
        // 转化后的base64
        console.log("base64", res);
        this.logoSrc = res;
      });

三、base64转换为file

function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        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 File([u8arr], filename, {type:mime});
}

四、图片转换为base64

function getImgToBase64(url,callback){//将图片转换为Base64
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}

五、arrayBuffer转Base64

function arrayBufferToBase64(buffer) {
        var binary = "";
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
      }

六、file转src

let src = URL.createObjectURL(file);

七、arrayBuffer转file

第一个参数是一个可能为ArrayBuffer、ArrayBufferView、Blob或者DOMString对象的数组，第二个参数表示文件名称.

let file = new File(arrayBuffer,fileName);

八、file转arrayBuffer

FileReader的实例方法readAsArrayBuffer可以读取指定的 Blob 或 File 内容，在文件读取完毕后会触发 loadend 事件，我们可以在回调里面拿到读取后的arrayBuffer

function fileToBuffer(file, callback){
    let fr = new FileReader();
    let filename = file.name;

    fr.readAsArrayBuffer(file);
    fr.addEventListener("loadend",(e) => {
        let buf = e.target.result;
        callback(buf, filename);
    },false);
}

九、arrayBuffer转Blob

第一个参数是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的数组,
第二个参数是Blob对象的type 属性，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型

let blob = new Blob([buf], { type: mimeType });

十、Blob转arrayBuffer

FileReader的实例方法readAsArrayBuffer除了读取file外还可以读取blob,所以使用方法和第八条一样，只是参数变成了blob.

function blobToBuffer(file, callback){
    let fr = new FileReader();
    let filename = file.name;

    fr.readAsArrayBuffer(blob);
    fr.addEventListener("loadend",(e) => {
        let buf = e.target.result;
        callback(buf, filename);
    },false);
}

十一、Blob转File

Blob转file我们可以借助FormData来实现，FormData能容纳的数据类型有三种分别是blob、file、string，我们可以将blob存入FormData对象，然后我们根据存入时的键名取值就能得到file文件。

const transformBlobToFile = (blob) => {
    // let file = await new Window.File([blob], `${new Date().getTime()}.jpg`);
    const fd = new FormData();
    let tempArr = imagePath.split("\\");
    fd.set("foo", blob, tempArr[tempArr.length - 1]);
    let file = fd.get("foo");
    setChooseFile(file);
  };

其实我们还可以借用window.File对象去生成file文件，但是注意在electron中使用时会有拿不到现象。