一、類型簡(jiǎn)介

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

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

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é)束符也要處理。

二、BLOB 與 File：

【1】BLOB 轉(zhuǎn) File

const file = new File([blob], fileName, { type: fileType, lastModified: Date.now() });

【2】File 轉(zhuǎn) BLOB

const blob = URL.createObjectURL(file);

三、 BLOB 與 base64：

【1】BLOB(url) 轉(zhuǎn) base64

const image = new Image();
image.src = imgBlob;
image.onload = () => {
  // 構(gòu)建canvas節(jié)點(diǎn)
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, image.width, image.height);
  // 轉(zhuǎn)換
  const imgBase64 = canvas.toDataURL();
  console.log(imgBase64);
};

【2】base64 轉(zhuǎn) BLOB

// 分割base64
const temp = base64Data.split(','); 
// 獲取類型
const mime = arr[0].match(/:(.*?);/)[1];
// 解碼使用 base-64 編碼的字符串
const raw = window.atob(temp[1]);
const rawLength = raw.length;
// base64文件數(shù)據(jù)讀取
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
  uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], { type: mime });

四、File 與 base64：

【1】File 轉(zhuǎn) base64

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
  // e.target.result 即為base64結(jié)果
  console.log(e.target.result);
};

【2】base64 轉(zhuǎn) File

// 分割base64
const arr = base64Data.split(','); 
// 獲取類型
const mime = arr[0].match(/:(.*?);/)[1];
// 解析base字符串
const bstr = atob(arr[1]); 
const n = bstr.length; 
// base64文件數(shù)據(jù)讀取
const u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
const file =  new File([u8arr], filename, { type: mime });

五、案例：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-732951.html

// 獲取圖片file轉(zhuǎn)base64
fileToBase64(file) {
   return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () { imgResult = reader.result }
        reader.onerror = function (error) { reject(error) }
        reader.onloadend = function () { resolve(imgResult) }
    })
},

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