前言
记录一下比较常见的图片格式（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 = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(e) {
const blob = new Blob([e.target.result], {
type});
console.log("blob:", blob);
const file = blobToFile(blob, 'fileName');
console.log('file', file);
};
}
- BLOB 转 File
blobToFile(blob, fileName){
const file = new File([blob], fileName, {
type: blob.type});
return file;
}
2、Blob 与 base64
- Blob转 base64
blobToBase64(blob){
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const base64 = e.target.result
console.log("base64", base64);
}
}
- base64 转 Blob
base64ToBlob(base64) {
// 分割base64
let arr = base64.split(',');
// 获取类型
let mime = arr[0].match(/:(.*?);/)[1] || type;
// 去掉url的头，并转化为byte
let bytes = window.atob(arr[1]);
let n = new ArrayBuffer(bytes.length);
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime});
},
3、File 与 base64
- File 与 base64
// 获取文件对象
const file = $("#file")[0].files[0];
fileToBase64(file){
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
// e.target.result 即为base64结果
console.log(e.target.result);
};
}
- base64 转 File
base64ToFile(base64,filename) {
// 分割base64
let arr = base64.split(',');
// 获取类型
let mime = arr[0].match(/:(.*?);/)[1] || type;
// 去掉url的头，并转化为byte
let bytes = window.atob(arr[1]);
let n = new ArrayBuffer(bytes.length);
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new File([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 = new Uint8Array(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 = new Uint8Array( 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(...new Uint8Array(buffer)))
}
三、扩展
- file转buffer
const buffer = fileReader.readAsArrayBuffer(file)
- file转binary(二进制格式)
const buffer = fileReader.readAsBinaryString(file)
- file转file(用于修改file的只读属性name、type、lastModified)
const newFile = new File([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/jpeg
const 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