Base64 、Blob、File

在获取图片时，遇到需要转换格式的情况。

一、格式的基本介绍

Base64：Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法
Blob：对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作。
File：文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

二、如何判断这三种格式

1.判断是否为Base64字符串

// 判断是否为base64格式字符串
function isBase64(str) {
    //正则表达式判断
    var reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
    return reg.test(str) //返回 true or false
}

2.判断是否为Blob对象

console.log(data instanceof Blob)   //ture  or  false

3.判断是否为File对象

console.log(data instanceof Blob)   //ture  or  false

PS:
Blob和File都用instanceof来判断是否为对应类型数据
有一点需要注意，File对象也是Blob对象 ，因为File继承于Blob,所以其中的判断逻辑可以自己定义。

三、格式之间的转换

1.Base64转换为File

function dataURLtoFile(dataurl, filename) {
    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 });
}

需要传两个参数，第一个是数据，第二个是自定义文件名字符串
2.Base64转换为Blob

function dataURLtoFile(dataurl, filename) {
    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 });
}

和转File基本一样，就最后一句return不一样
3.Blob转File

function dataURLtoFile(dataurl, filename) {
    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转File其实用的都是new File()这个方法，上面的第二个参数是传进来的，这里是定死的，这个参数不是很重要，可以自行修改函数，方法都已经提供了，直接使用就可以。