js圖片格式轉(zhuǎn)換的技巧有哪些

這篇文章主要介紹“js圖片格式轉(zhuǎn)換的技巧有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“js圖片格式轉(zhuǎn)換的技巧有哪些”文章能幫助大家解決問(wèn)題。

一、類型簡(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è)<input> 元素上傳文件返回的 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é)束符也要處理。

二、類型轉(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(','); 
// 獲取類型
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(','); 
// 獲取類型
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 });

關(guān)于“js圖片格式轉(zhuǎn)換的技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。