Base64轉換成圖片

一、Base64簡介

Base64是一種將二進制數據轉換為ASCII字符的編碼方式。這個編碼方式由美國在線公司開發，在電子郵件中廣泛使用，因為很多郵件系統只支持ASCII字符。

Base64可以將任意長度的二進制數據編碼成純文本，只包含大小寫字母、數字、”+”、”/”、”=”等字符，不包含其他特殊字符。因此可以通過郵件等傳遞文本方式發送二進制數據。

例如，將字符串”hello”用Base64編碼後得到的字符串為”aGVsbG8=”。通過Base64編碼可以將二進制文件轉換為可以直接嵌入到HTML、CSS中的文本格式。其中應用最廣泛的即為將圖片文件轉換為Base64編碼的方式。

二、將圖片轉換為Base64編碼

將圖片轉換成Base64編碼非常簡單，只需調用HTML5中提供的FileReader類，使用readAsDataURL()方法讀取圖片數據，並將其轉化為Base64格式。

function readPicture(file){
  let reader = new FileReader();
  reader.onload = function(event){
    let base64String = event.target.result;
    console.log(base64String);
  }
  reader.readAsDataURL(file);
}

調用readPicture()方法，傳入一個圖片文件即可將圖片轉換為Base64編碼格式。

三、將Base64編碼轉換為圖片

將Base64編碼轉換為圖片同樣非常簡單，只需要創建一個Image對象，並將Base64編碼賦值給其src屬性即可。以下是一個示例代碼:

let img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......';
document.body.appendChild(img);

以上代碼可將Base64編碼的圖片添加到當前頁面。

四、Base64編碼優缺點

將圖片轉換為Base64編碼，可以將圖片直接插入HTML代碼中，使得圖片顯示的更為方便，而且在某些場景中避免了HTTP的請求延遲。但同時也有以下缺點：

• Base64編碼會使圖片文件增大33%，在一些網絡流量比較寶貴的場景有可能會影響用戶體驗。
• Base64編碼的圖片無法進行緩存，每次頁面加載都要重新加載圖片，而且在圖片較多的情況下對性能也會有影響。
• Base64編碼的字符串太長，在嵌入HTML頁面或傳輸過程中，可能會導致數據傳輸時間變長。

因此，對於需要傳輸或者特別關注性能的應用，建議使用圖片URL或者雪碧圖等方式進行優化處理。