JavaScript實現(xiàn)Blob、File、ArrayBuffer、base64、URL之間互轉(zhuǎn)方法
前言
在處理文件數(shù)據(jù)時常常需要將其轉(zhuǎn)換為其他的類型數(shù)據(jù)以方便后續(xù)操作。例如在引入第三方庫時，支持的類型可能在項目不能直接獲取到，那么就需要進行類型轉(zhuǎn)換。其中主要的類型包括 Blob、File、ArrayBuffer、base64、URL 。
類型解釋
Blob
Blob（Binary Large Object）是一種二進制大對象，是一種存儲大量二進制數(shù)據(jù)的容器。
File
File 通常為用戶在 input 上選擇文件的結(jié)果。 繼承于 Blob，一些處理 Blob 的函數(shù)也可以直接處理 FIle（如：URL.createObjectURL）。
ArrayBuffer
ArrayBuffer 是一種用于表示通用的、固定長度的原始二進制數(shù)據(jù)緩沖區(qū)的對象。它提供了一種在內(nèi)存中分配固定大小的緩沖區(qū)，可以存儲各種類型的二進制數(shù)據(jù)。ArrayBuffer 本身并不能直接操作數(shù)據(jù)，而是需要使用 TypedArray 視圖或 DataView 對象來讀取和寫入數(shù)據(jù)。
base64
Base64 是一種用于表示二進制數(shù)據(jù)的編碼方式，通過將二進制數(shù)據(jù)轉(zhuǎn)換為文本字符串，以便在文本環(huán)境中傳遞。
URL
URL 可以分為兩種，一種為 base64 拼接上類型的 DataURL 地址，另一種為 createObjectURL 方法創(chuàng)建的當(dāng)前頁面生命周期下的 ObjectURL 地址。
DataURL: data:image/png;base64,iVBORw0KGgoAAAANS...
ObjectURL: blob:https://f1eb432b-1ef7-42...
Blob 類型轉(zhuǎn)換
對于 Blob 的 b 部分類型轉(zhuǎn)換可以利用 FileReader 類的讀取函數(shù)完成。其中包括 readAsArrayBuffer，readAsDataURL，readAsText（得到字符串形式內(nèi)容）。
Blob 轉(zhuǎn) ArrayBuffer
function blobToArrayBuffer(blob) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsArrayBuffer(blob);
});
}
Blob 轉(zhuǎn) File
直接使用 File 構(gòu)造方法即可，可以指定文件名稱，文件類型（如：image/jpeg），修改時間
function blobToFile(blob, fileName, type = '', lastModified = Date.now()) {
return new File(blob, fileName, { type, lastModified });
}
Blob 轉(zhuǎn) DataURL
function blobToDataURL(blob) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
}
Blob 轉(zhuǎn) base64
先使用 FileReader 將 Blob 轉(zhuǎn)為 DataURL，再對將 DataURL 的類型去掉既可以。
function blobToBase64(blob) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(blob);
});
}
// 使用 blobToDataURL
function blobToBase64(blob) {
return new Promise((resolve) => {
blobToDataURL(blob).then((dataURL) => resolve(dataURL.split(',')[1]));
});
}
Blob 轉(zhuǎn) ObjectURL
function blobToObjectURL(blob) {
return URL.createObjectURL(blob);
}
File 類型轉(zhuǎn)換
File 轉(zhuǎn) Blob、ArrayBuffer、base64、DataURL
在大多數(shù)情況下是不需要轉(zhuǎn)換的，因為 File 本來就繼承與 Blob。在必須轉(zhuǎn)換的情況下可以利用 FileReader.readAsArrayBuffer 獲取到 arrayBuffer，再將 arrayBuffer 轉(zhuǎn)為 Blob
ArrayBuffer、DataURL 也可以通過 FileReader 轉(zhuǎn)換
base64 只需要把 DataURL 的類型去掉即可
function fileToBlob(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(new Blob([reader.result], { type: file.type }));
reader.readAsArrayBuffer(file);
});
}
function fileToArrayBuffer(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsArrayBuffer(file);
});
}
function fileToDataURL(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsDataURL(file);
});
}
function fileToBase64(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(file);
});
}
File 轉(zhuǎn) ObjectURL
function blobToObjectURL(blob) {
return URL.createObjectURL(blob);
}
ArrayBuffer 類型轉(zhuǎn)換
ArrayBuffer 是沒有指定類型的二進制緩存，所以在一些轉(zhuǎn)換時需要提供具體的類型。
ArrayBuffer 轉(zhuǎn) Blob、File
直接使用 Blob、File 構(gòu)造函數(shù)即可，可以指定數(shù)據(jù)類型。文件可以指定文件名和修改時間。
function arrayBufferToBlob(arrayBuffer, type) {
return new Blob(arrayBuffer, { type });
}
function arrayBufferToFile(arrayBuffer, fileName, type = '', lastModified = Date.now()) {
return new File(arrayBuffer, fileName, { type, lastModified });
}
ArrayBuffer 轉(zhuǎn) Base64
需要先將 ArrayBuffer 轉(zhuǎn)為二進制字符串，再將二進制字符串轉(zhuǎn)為 Base64
function arrayBufferToBase64(arrayBuffer) {
return btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
}
ArrayBuffer 轉(zhuǎn) DataURL
- 先將 ArrayBuffer 轉(zhuǎn)為 base64，再加上類型即可。(推薦)
- 先將 ArrayBuffer 轉(zhuǎn)為 Blob，再使用 FileReader.readAsDataURL 獲取。
function arrayBufferToDataURL(arrayBuffer, type) {
return `data:${type};base64,${btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)))}`;
}
function arrayBufferToDataURL(arrayBuffer, type) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(new Blob(arrayBuffer, { type }));
});
}
ArrayBuffer 轉(zhuǎn) ObjectURL
需要先將 ArrayBuffer 轉(zhuǎn)為 Blob 或者 File，再使用 createObjectURL 轉(zhuǎn)為 ObjectURL
function arrayBufferToObjectURL(arrayBuffer, type) {
return URL.createObjectURL(new Blob(arrayBuffer, { type }));
}
String 轉(zhuǎn) ArrayBuffer
有時需要將其他類型轉(zhuǎn)換為 ArrayBuffer，比如將字符串轉(zhuǎn)為 ArrayBuffer：
function stringToArrayBuffer(text) {
return new TextEncoder().encode(text).buffer;
}
DataURL 類型轉(zhuǎn)換
DataURL 轉(zhuǎn) base64
直接去掉類型即可
function stringToArrayBuffer(dataURL) {
return dataURL.split(',')[1];
}
DataURL 轉(zhuǎn) ArrayBuffer
在轉(zhuǎn)為 ArrayBuffer 時需要先提取 base64 并解碼，然后定義二進制字符串長度的 ArrayBuffer 并關(guān)聯(lián) Unit8Array，最后將字符串轉(zhuǎn)為 UTF-16 碼元并寫入關(guān)聯(lián)的 Unit8Array 中
function dataURLToArrayBuffer(dataURL) {
const base64 = dataURL.split(',')[1];
const binaryString = atob(base64);
const arrayBuffer = new ArrayBuffer(binaryString.length);
const uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < binaryString.length; i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
return arrayBuffer;
}
DataURL 轉(zhuǎn) Blob、File
轉(zhuǎn)為 Blob 或 File 時其實是幾種數(shù)據(jù)切換：DataURL => base64 => binaryArray => typedArray => Blob\File
其中使用 atob 將 base64 解碼為字符串，定義 Unit8Array 的 typedArray 用于緩存 UTF-16 碼元，通過 String.chartCodeAt 獲取字符的 UTF-16，最后使用 Blob\File 的構(gòu)造函數(shù)完成類型轉(zhuǎn)換。由于 Blob 和 File 構(gòu)造函數(shù)可以接受 typedArray，那么就沒必要轉(zhuǎn) ArrayBuffer 了。另外轉(zhuǎn) File 時可以指定文件名
function base64ToUnit8Array(base64) {
const binaryString = atob(base64);
const uint8Array = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
return uint8Array;
}
function dataURLToBlob(dataURL) {
const [type, base64] = dataURL.split(',');
return new Blob([base64ToUnit8Array(base64)], { type });
}
function dataURLToFile(dataURL, fileName) {
const [type, base64] = dataURL.split(',');
return new File([base64ToUnit8Array(base64)], fileName, { type });
}
DataURL 轉(zhuǎn) ObjectURL
由于 createObjectURL 接受 Blob 或 File，所以需要先轉(zhuǎn)為 Blob 或 File。這里轉(zhuǎn)為 Blob。
function dataURLToObjectURL(dataURL) {
const [type, base64] = dataURL.split(',');
const binaryString = atob(base64);
const uint8Array = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
return URL.createObjectURL(new Blob([uint8Array], { type }));
}
// 使用 dataURLToBlob
function dataURLToObjectURL(dataURL) {
const type = dataURL.split(',')[0];
return URL.createObjectURL(dataURLToBlob(dataURL), { type });
}
ObjectURL 類型轉(zhuǎn)換
一般情況下是不會有 ObjectURL 轉(zhuǎn)為其他類型的需求的，因為 ObjetcURL 的生命周期只在當(dāng)前頁面，只會在當(dāng)前頁面由其他資源生成，既然已經(jīng)存在其原資源，也就沒有必要再轉(zhuǎn)換，如果需要其他類型的也完全可以使用原資源來轉(zhuǎn)換。如果需要轉(zhuǎn)換，那么第一步就是通過請求拉到定義的數(shù)據(jù)。這些轉(zhuǎn)換也是適用遠程請求的。
ObjectURL 轉(zhuǎn) Blob、File
// function objectURLToBlob(objectURL, fileType) {
function objectURLToFile(objectURL, fileName, fileType) {
const xhr = new XMLHttpRequest();
xhr.open('GET', objectURL, true);
xhr.responseType = 'blob';
return new Promise((resolve, reject) => {
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
// resolve(blob);
const file = new File([blob], fileName, { type: fileType });
resolve(file);
} else {
reject(new Error('Failed to load the resource'));
}
};
xhr.onerror = () => reject(new Error('Network error'));
xhr.send();
});
}
ObjectURL 轉(zhuǎn) ArrayBuffer、base64、DataURL
先獲取到文件數(shù)據(jù)，之后再使用 Blob 或者 File 類型轉(zhuǎn)為 DataURL 或 ArrayBuffer 或其他類型即可。
總結(jié)
對于 File 和 Blob 的轉(zhuǎn)為其他類型大多依賴 FileReader。
其他類型轉(zhuǎn)為 File 或者 Blob 時最終都是通過構(gòu)造函數(shù)完成的。
base64 和 DataURL 的轉(zhuǎn)換只是類型的截取和拼接。
轉(zhuǎn)為 ObjectURL 時需要先轉(zhuǎn)為 Blob 或者 File 再通過 createObjectURL 生成。
到此這篇關(guān)于JavaScript實現(xiàn)Blob、File、ArrayBuffer、base64、URL之間互轉(zhuǎn)方法的文章就介紹到這了,更多相關(guān)Blob、File、ArrayBuffer、base64、URL互轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Proxy代理是JavaScript中一項強大而靈活的功能，它可以用于攔截、修改和自定義對象的底層操作，這篇文章主要介紹了JavaScript中的Proxy代理的各種用法和功能,需要的朋友可以參考下2023-06-06
JavaScript中Cookie的使用之如何設(shè)置失效時間
這篇文章主要介紹了JavaScript中Cookie的使用之如何設(shè)置失效時間問題，具有很好的參考價值，希望對大家有所幫助。2022-12-12
這篇文章主要介紹了JS簡單獲取當(dāng)前年月日星期的方法,結(jié)合完整實例形式分析了javascript基于自定義函數(shù)獲取當(dāng)前日期時間的方法,涉及javascript中Date()類的使用與日期相關(guān)運算技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JavaScript中使用數(shù)組方法匯總的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章向大家分享了40多個經(jīng)典的JavaScript開發(fā)技巧，相信讀完這篇文章對大家開發(fā)javascript有很大的幫助作用，感興趣的小伙伴們可以參考一下2015-11-11
一直都在想怎么樣使彈出的DIV能在任何時候都是居中顯示的，剛開始的時候是用CSS樣式直接定義好層的位置，但是當(dāng)頁面很長的時候，或是瀏覽器窗口大小不是固定的時候就不能正確的顯示，所以只好用JS來控制DIV的顯示位置。2008-06-06
js 動態(tài)添加標(biāo)簽（新增一行，其實很簡單，就是幾個函數(shù)的應(yīng)用）
把所有代碼拷下另存為一個html文件，在瀏覽器中打開，點擊“新增一行”按鈕就可以,以下是對js函數(shù)的解釋2009-03-03
本文主要對JavaScript的自動垃圾收集機制進行簡要分析，并介紹了垃圾收集的方式：標(biāo)記清除（mark-and-sweep）和引用計數(shù)（reference counting），需要的朋友一起來看下吧2016-12-12
javascript 獲取網(wǎng)頁參數(shù)系統(tǒng)
用處比較多，適合在當(dāng)前網(wǎng)頁打開別的網(wǎng)站的內(nèi)容2008-07-07
這篇文章介紹了javascript中直接寫php代碼的方法，有需要的朋友可以參考一下2013-07-07