前言

記錄一下比較常見(jiàn)的圖片格式（File、Blob、base64）在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法。

一、類型簡(jiǎn)介

• Blob

BLOB(binary large object)： 二進(jìn)制大對(duì)象,是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器。 在計(jì)算機(jī)中,BLOB常常是數(shù)據(jù)庫(kù)中用來(lái)存儲(chǔ)二進(jìn)制文件的字段類型。

我們?cè)跒g覽器中輸出的Blob對(duì)象：

• File

File 對(duì)象通常是用戶在網(wǎng)頁(yè)中的一個(gè) 元素上傳文件返回的 FileList 對(duì)象，或者是拖放操作返回的 DataTransfer 對(duì)象，也可以在瀏覽器中的控制臺(tái)中自己創(chuàng)建。

我們?cè)跒g覽器中輸出的File：

可以看到它的屬性有和Blob一樣的地方，只是在Blob的基礎(chǔ)上做了擴(kuò)展

• base64

Base64是網(wǎng)絡(luò)上最常見(jiàn)的用于傳輸8Bit字節(jié)碼的編碼方式之一，Base64就是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法。編碼規(guī)則：把3個(gè)字節(jié)變成4個(gè)字節(jié);每76個(gè)字符加一個(gè)換行符;最后的結(jié)束符也要處理。

看一個(gè)Base64格式的圖片了解一下：

可以看到，Base64格式的圖片以data開(kāi)頭，后面跟著圖片類型和圖片的基本數(shù)據(jù)

二、類型轉(zhuǎn)換

1、BLOB 與 File

• File 轉(zhuǎn) BLOB

// 獲取文件對(duì)象
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 轉(zhuǎn) File

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

2、Blob 與 base64

• Blob轉(zhuǎn) base64

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

• base64 轉(zhuǎn) Blob

base64ToBlob(base64) {
	// 分割base64
	let arr = base64.split(',');
	// 獲取類型
	let mime = arr[0].match(/:(.*?);/)[1] || type;
	// 去掉url的頭，并轉(zhuǎn)化為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

// 獲取文件對(duì)象
const file = $("#file")[0].files[0];
fileToBase64(file){
	const reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function (e) {
	  // e.target.result 即為base64結(jié)果
	  console.log(e.target.result);
	};
}

• base64 轉(zhuǎn) File

base64ToFile(base64,filename) {
	// 分割base64
	let arr = base64.split(',');
	// 獲取類型
	let mime = arr[0].match(/:(.*?);/)[1] || type;
	// 去掉url的頭，并轉(zhuǎn)化為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轉(zhuǎn)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轉(zhuǎn)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 );
	
	// 簡(jiǎn)寫(xiě)（一行代碼）
	return window.btoa(String.fromCharCode(...new Uint8Array(buffer)))
}

三、擴(kuò)展

• file轉(zhuǎn)buffer

const buffer = fileReader.readAsArrayBuffer(file)

• file轉(zhuǎn)binary(二進(jìn)制格式)

const buffer = fileReader.readAsBinaryString(file)

• file轉(zhuǎn)file(用于修改file的只讀屬性name、type、lastModified)

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

• blob轉(zhuǎn)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加解密 -- 不支持中文
場(chǎng)景：由于一些網(wǎng)絡(luò)通訊協(xié)議的限制,必須對(duì)原數(shù)據(jù)進(jìn)行編碼后才可發(fā)送，后端得到后再解碼得到原數(shù)據(jù)，例如，發(fā)送某些含有 ASCII 碼表中 0 到 31 之間的控制字符的數(shù)據(jù)。
base轉(zhuǎn)碼
const base64 = window.btoa('a')
base解碼
const string = window.atob(base64)

參考鏈接：
ArrayBuffer轉(zhuǎn)base64詳解：https://juejin.cn/post/6844904088811880455
JavaScript(ES6) - ArrayBuffer: https://www.jianshu.com/p/5a841d6d7cc3文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-433429.html

到了這里，關(guān)于圖片格式轉(zhuǎn)換（File、Blob、base64）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！