图片格式转换（File、Blob、base64）

前言

记录一下比较常见的图片格式（File、Blob、base64）在不同的场景他们之间的相互转换的方法。

一、类型简介

• Blob

BLOB(binary large object)： 二进制大对象,是一个可以存储二进制文件的容器。 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。

属性名称读/写描述size只读Blob 对象中所包含数据的大小（字节）。type只读一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 “image/png”
我们在浏览器中输出的Blob对象：

• File

File 对象通常是用户在网页中的一个 元素上传文件返回的 FileList 对象，或者是拖放操作返回的 DataTransfer 对象，也可以在浏览器中的控制台中自己创建。

属性名称读/写描述name只读返回文件的名称.由于安全原因,返回的值并不包含文件路径 。type只读返回 File 对象所表示文件的媒体类型（MIME）。例如 PNG 图像是 “image/png”.lastModified只读number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。lastModifiedDate只读Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。size只读File 对象中所包含数据的大小（字节）webkitRelativePath只读返回 File 相关的 path 或 URL。
我们在浏览器中输出的File：

可以看到它的属性有和Blob一样的地方，只是在Blob的基础上做了扩展

• base64

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。编码规则：把3个字节变成4个字节;每76个字符加一个换行符;最后的结束符也要处理。

看一个Base64格式的图片了解一下：

可以看到，Base64格式的图片以data开头，后面跟着图片类型和图片的基本数据

二、类型转换

1、BLOB 与 File

• File 转 BLOB

// 获取文件对象const _file =$("#file")[0].files[0];fileToBlob(){const type = file.type;const reader =newFileReader();
    reader.readAsDataURL(file)
    reader.onload=function(e){const blob =newBlob([e.target.result],{type});
        console.log("blob:", blob);const file =blobToFile(blob,'fileName');
         console.log('file', file);};}

• BLOB 转 File

blobToFile(blob, fileName){const file =newFile([blob], fileName,{type: blob.type});return file;}

2、Blob 与 base64

• Blob转 base64

blobToBase64(blob){const reader =newFileReader();
    reader.readAsDataURL(blob);
    reader.onload=(e)=>{const base64 = e.target.result
      console.log("base64", base64);}}

• base64 转 Blob

base64ToBlob(base64){// 分割base64let arr = base64.split(',');// 获取类型let mime = arr[0].match(/:(.*?);/)[1]|| type;// 去掉url的头，并转化为bytelet bytes = window.atob(arr[1]);let n =newArrayBuffer(bytes.length);let u8arr =newUint8Array(n);while(n--){
      u8arr[n]= bytes.charCodeAt(n);}returnnewBlob([u8arr],{type: mime});},

3、File 与 base64

• File 与 base64

// 获取文件对象const file =$("#file")[0].files[0];fileToBase64(file){const reader =newFileReader();
    reader.readAsDataURL(file);
    reader.onload=function(e){// e.target.result 即为base64结果
      console.log(e.target.result);};}

• base64 转 File

base64ToFile(base64,filename){// 分割base64let arr = base64.split(',');// 获取类型let mime = arr[0].match(/:(.*?);/)[1]|| type;// 去掉url的头，并转化为bytelet bytes = window.atob(arr[1]);let n =newArrayBuffer(bytes.length);let u8arr =newUint8Array(n);while(n--){
      u8arr[n]= bytes.charCodeAt(n);}returnnewFile([u8arr],filename,{type: mime });},

4、arrayBuffer 与 base64

• base64转arrayBuffer

base64ToUint8Array(base64String){const padding ='='.repeat((4- base64String.length %4)%4);const base64 =(base64String + padding).replace(/\-/g,'+').replace(/_/g,'/');const rawData = window.atob(base64);const outputArray =newUint8Array(rawData.length);for(let i =0; i < rawData.length;++i){
         outputArray[i]= rawData.charCodeAt(i);}return outputArray;}

• arrayBuffer转base64

arrayBufferToBase64(buffer){var binary='';var bytes =newUint8Array( buffer );var len = bytes.byteLength;for(var i =0; i < len; i++){
       binary += String.fromCharCode( bytes[ i ]);}return window.btoa( binary );// 简写（一行代码）return window.btoa(String.fromCharCode(...newUint8Array(buffer)))}

三、扩展

• file转buffer

const buffer = fileReader.readAsArrayBuffer(file)

• file转binary(二进制格式)

const buffer = fileReader.readAsBinaryString(file)

• file转file(用于修改file的只读属性name、type、lastModified)

const newFile =newFile([file],'newName.wav',{type:'audio/wav',lastModified: Date.now()})

• blob转blobUrl

const blob ='.....'
window.URL= window.URL|| window.webkitURL;const blobURL = window.URL.createObjectURL(blob);

• base64操作

const arr = base64.split(',')const type = arr[0].match(/:(.*?);/)[1]// image/jpegconst size = window.atob(arr[1]).length
base加解密 -- 不支持中文
场景：由于一些网络通讯协议的限制,必须对原数据进行编码后才可发送，后端得到后再解码得到原数据，例如，发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。
base转码
const base64 = window.btoa('a')
base解码
const string = window.atob(base64)

参考链接：
ArrayBuffer转base64详解：https://juejin.cn/post/6844904088811880455
JavaScript(ES6) - ArrayBuffer: https://www.jianshu.com/p/5a841d6d7cc3