Base64圖片壓縮全面指南

一、壓縮圖片的必要性

高清圖片往往佔用較大的存儲空間和網絡傳輸帶寬，大幅度拖慢網頁打開速度，影響用戶體驗。針對這一問題，壓縮圖片成為了良好的解決方案。

二、Base64壓縮基礎知識

Base64作為一種編碼方法，可以將二進制數據轉化成簡單易讀的字符串形式。因此，我們可以將圖片轉化成Base64編碼，從而實現圖片壓縮。

Base64壓縮原理：將圖片數據編碼成Base64字符串，再通過去除一些特殊字符和將Base64字符串中的連續空格替換為單個空格來壓縮圖片。

三、Base64圖片壓縮實現

1、將圖片轉成Base64格式

使用JavaScript可以方便的將圖片數據解析成Base64編碼。

/*方法一*/
function getImageBase64(file){
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(){
    let base64 = this.result;
    //進行壓縮
    compressImage(base64);
  }
}

/*方法二*/
function getImageBase64(img){
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(img,0,0,img.width,img.height);
  let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  let dataURL = canvas.toDataURL("image/"+ext);
  //進行壓縮
  compressImage(dataURL);
}

2、壓縮Base64格式

通過去除Base64編碼中的一些字符和空格來達到壓縮的目的。

function compressImage(base64){
  let str = base64.replace(new RegExp("=(?:[A-Za-z0-9+/])*", "g"), "");
  str = str.replace(/([^\0]{75})/g, "$1\n");
  str = str.replace(/\s/g, '');
  //最大長度為1000000
  if(str.length>=1000000){
    alert('圖片過大，請重新上傳');
    return;
  }
  //獲取壓縮後的Base64編碼
  console.log(str);
}

3、測試壓縮效果

壓縮後的圖片可以與原始圖片進行比較，以此來判斷壓縮效果。

let img1 = new Image();
img1.onload = function () {
  getImageBase64(img1);
  console.log('img1寬度：'+img1.width);
  console.log('img1高度：'+img1.height);
}
img1.src = '原始圖片地址';

let img2 = new Image();
img2.onload = function () {
  getImageBase64(img2);
  console.log('img2寬度：'+img2.width);
  console.log('img2高度：'+img2.height);
}
img2.src = '壓縮後的圖片地址';

四、Base64圖片壓縮的優點和缺點

1、優點

基於Base64格式的圖片壓縮，可以通過JavaScript等前端技術實現，減少後端服務器的壓力，提升前端性能；Base64編碼的圖片保存在HTML文檔中，避免網絡請求，減少了網絡帶寬的消耗。

2、缺點

Base64編碼的圖片體積會增加33%，因此需要考慮是否使用Base64格式進行壓縮。

五、Base64圖片壓縮的適用場景

Base64圖片壓縮適用於需要在前端進行圖片處理的地方，如圖片上傳、圖像預覽、拖拽上傳等場景。

六、總結

通過本文的介紹，我們了解了Base64圖片壓縮的原理、實現方法和適用場景。希望能夠幫助讀者在實際開發中更好的實現圖片壓縮。