js圖片格式轉換的技巧有哪些

這篇文章主要介紹“js圖片格式轉換的技巧有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“js圖片格式轉換的技巧有哪些”文章能幫助大家解決問題。

一、類型簡介

BLOB(binary large object)： 二進制大對象,是一個可以存儲二進制文件的容器。 在計算機中,BLOB常常是數據庫中用來存儲二進制文件的字段類型。

File： File 對象通常是用戶在網頁中的一個<input> 元素上傳文件返回的 FileList 對象，或者是拖放操作返回的 DataTransfer 對象，也可以在瀏覽器中的控制臺中自己創建。

base64： Base64是網絡上最常見的用于傳輸8Bit字節碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進制數據的方法。編碼規則：把3個字節變成4個字節;每76個字符加一個換行符;最后的結束符也要處理。

二、類型轉換

1. BLOB 與 File

BLOB 轉 File

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

File 轉 BLOB

const blob = URL.createObjectURL(file);

2. BLOB 與 base64

BLOB(url) 轉 base64

const image = new Image();
image.src = imgBlob;
image.onload = () => {
  // 構建canvas節點
  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);
  // 轉換
  const imgBase64 = canvas.toDataURL();
  console.log(imgBase64);
};

base64 轉 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文件數據讀取
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 轉 base64

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

base64 轉 File

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

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