簡介

在本文中，我們將探討如何通過 JavaScript 實現前端圖片壓縮功能。通過壓縮圖片，我們可以降低圖片文件的大小，提高頁面加載速度，減少網絡帶寬消耗，以及改善用戶體驗。我們將通過以下幾個步驟來實現這一功能：

創建一個 HTML 文件，設置文件選擇框和觸發壓縮的按鈕。
使用 JavaScript 讀取用戶選擇的圖片文件，并在頁面上顯示原始圖片。
編寫 JavaScript 函數，對原始圖片進行壓縮處理。
將壓縮后的圖片顯示在頁面上，并提供壓縮前后圖片大小的比較。

1. HTML 文件設置

首先，我們需要在 HTML 文件中設置一個文件選擇框和一個觸發壓縮的按鈕：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圖片壓縮</title>
  <style>
    img {
        max-width: 200px;
        margin-right: 10px;
        margin-top: 20px;
    }
  </style>
</head>
<body>
<!-- 文件選擇框 -->
<input type="file" id="fileInput" accept="image/*"/>
<!-- 觸發壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>

<script>
  // JavaScript 代碼將在下文中介紹
</script>
</body>
</html>

2. JavaScript 實現圖片壓縮

2.1 ### 獲取 Base64 圖片大小

我們首先定義一個函數 getBase64ImageSize，用于獲取 Base64 格式圖片的大小。

// 獲取 base64 圖片的大小
const getBase64ImageSize = (base64String) => {
  // 計算 base64 字符串的長度
  const len = base64String.length;
  // 每個 base64 字符所占用的字節數，Base64 編碼中每個字符占用 6 位，即 3 字節
  const bytes = len * 0.75;
  // 轉換為 KB
  const sizeInKB = bytes / 1024;
  // 返回圖片大小，保留兩位小數
  return sizeInKB.toFixed(2);
}

2.2 讀取文件并顯示原始圖片

// 顯示原始圖片
const displayOriginalImage = (file) => {
  if (!file) {
    alert('請選擇圖片');
    return;
  }

  const reader = new FileReader();
  reader.onload = () => {
    const div = document.createElement('div');
    const img = document.createElement('img');
    const span = document.createElement('span');
    img.src = reader.result;
    span.innerText = `原圖大小：${getBase64ImageSize(reader.result)}KB`;

    div.appendChild(img);
    div.appendChild(span)
    document.body.appendChild(div);
  }
  reader.readAsDataURL(file);
}

// 綁定文件選擇事件
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  displayOriginalImage(file);
})

````

markdownCopy code

前端圖片壓縮實現指南

簡介

1. HTML 文件設置

首先，我們需要在 HTML 文件中設置一個文件選擇框和一個觸發壓縮的按鈕：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圖片壓縮</title>
  <style>
    img {
      margin-left: 20px;
      max-width: 100px;
    }
  </style>
</head>
<body>
<!-- 文件選擇框 -->
<input type="file" id="fileInput" accept="image/*"/>
<!-- 觸發壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>

<script>
  // JavaScript 代碼將在下文中介紹
</script>
</body>
</html>

2. JavaScript 實現圖片壓縮

2.1 獲取 Base64 圖片大小

我們首先定義一個函數 getBase64ImageSize，用于獲取 Base64 格式圖片的大小。

javascriptCopy code
// 獲取 base64 圖片的大小
const getBase64ImageSize = (base64String) => {
  // 計算 base64 字符串的長度
  constlen = base64String.length;
  // 每個 base64 字符所占用的字節數，Base64 編碼中每個字符占用 6 位，即 3 字節
  const bytes = len * 0.75;
  // 轉換為 KB
  const sizeInKB = bytes / 1024;
  // 返回圖片大小，保留兩位小數
  return sizeInKB.toFixed(2);
}

2.2 讀取文件并顯示原始圖片

我們接著定義一個函數 displayOriginalImage，用于讀取用戶選擇的圖片文件并在頁面上顯示原始圖片。

// 顯示原始圖片
const displayOriginalImage = (file) => {
  if (!file) {
    alert('請選擇圖片');
    return;
  }

  const reader = new FileReader();
  reader.onload = () => {
    const div = document.createElement('div');
    const img = document.createElement('img');
    const span = document.createElement('span');
    img.src = reader.result;
    span.innerText = `原圖大小：${getBase64ImageSize(reader.result)}KB`;

    div.appendChild(img);
    div.appendChild(span)
    document.body.appendChild(div);
  }
  reader.readAsDataURL(file);
}

2.3 壓縮圖片

接下來，我們定義一個函數 compressImage，用于壓縮圖片。

// 壓縮圖片
const compressImage = (file, quality = 0.8, success) => {
  const reader = new FileReader();

  // 讀取文件后的回調函數
  reader.onload = () => {
    const img = new Image();

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 設置 canvas 的大小
      canvas.width = img.width;
      canvas.height = img.height;

      // 在 canvas 上繪制圖片
      ctx.drawImage(img, 0, 0, img.width, img.height);

      // 將 canvas 上的圖像數據壓縮為 base64 格式
      const compressedDataURL = canvas.toDataURL('image/jpeg', quality);

      // 調用成功回調函數，并傳遞壓縮后的圖片數據
      success && success(compressedDataURL);
    }

    // 加載圖片
    img.src = reader.result;
  }

  // 讀取文件為 DataURL
  reader.readAsDataURL(file);
}

這個函數接受三個參數：文件對象 file、壓縮質量 quality（默認為 0.8）、成功回調函數 success。在函數內部，我們使用 FileReader 對象讀取文件，然后在加載圖片完成后，將其繪制到 canvas 上，并通過 toDataURL 方法將 canvas 上的圖像數據壓縮為 base64 格式。最后，調用成功回調函數，并傳遞壓縮后的圖片數據。

2.4 觸發壓縮操作

最后，我們為壓縮按鈕添加事件監聽，觸發壓縮圖片操作。

// 當點擊按鈕時觸發壓縮圖片操作
compressButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  compressImage(file, 0.8, (imgBase64) => {
    const div = document.createElement('div');
    const img = document.createElement('img');
    const span = document.createElement('span');
    img.src = imgBase64;
    span.innerText = `壓縮后大小：${getBase64ImageSize(imgBase64)}KB`;

    div.appendChild(img);
    div.appendChild(span)
    document.body.appendChild(div);
  });
});