快捷導(dǎo)航

js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)

更新時(shí)間：2023年04月17日 11:08:21 作者：野er

這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見(jiàn)的圖片格式（File、Blob、base64）在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下

一、類(lèi)型簡(jiǎn)介

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

屬性名稱(chēng)	讀/寫(xiě)	描述
size	只讀	Blob 對(duì)象中所包含數(shù)據(jù)的大小（字節(jié)）。
type	只讀	一個(gè)字符串，表明該Blob對(duì)象所包含數(shù)據(jù)的MIME類(lèi)型。如果類(lèi)型未知，則該值為空字符串。例如 “image/png”.

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

屬性名稱(chēng)	讀/寫(xiě)	描述
name	只讀	返回文件的名稱(chēng).由于安全原因,返回的值并不包含文件路徑。
type	只讀	返回 File 對(duì)象所表示文件的媒體類(lèi)型（MIME）。例如 PNG 圖像是 “image/png”.
lastModified	只讀	number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以來(lái)的毫秒數(shù)。
lastModifiedDate	只讀	Date, 返回當(dāng)前文件的最后修改日期,如果無(wú)法獲取到文件的最后修改日期,則使用當(dāng)前日期來(lái)替代。
size	只讀	File 對(duì)象中所包含數(shù)據(jù)的大小（字節(jié)）。

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

二、類(lèi)型轉(zhuǎn)換

1. BLOB 與 File

BLOB 轉(zhuǎn) File

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

File 轉(zhuǎn) BLOB

const blob = URL.createObjectURL(file);

2. BLOB 與 base64

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);
};

base64 轉(zhuǎn) BLOB

// 分割base64
const temp = base64Data.split(','); 
// 獲取類(lèi)型
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 });

3. File 與 base64

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);
};

base64 轉(zhuǎn) File

// 分割base64
const arr = base64Data.split(','); 
// 獲取類(lèi)型
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 });