簡介

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

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

1. HTML 文件設(shè)置

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

<!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/*"/>
<!-- 觸發(fā)壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>

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

2. JavaScript 實現(xiàn)圖片壓縮

2.1 ### 獲取 Base64 圖片大小

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

// 獲取 base64 圖片的大小
const getBase64ImageSize = (base64String) => {
  // 計算 base64 字符串的長度
  const len = base64String.length;
  // 每個 base64 字符所占用的字節(jié)數(shù)，Base64 編碼中每個字符占用 6 位，即 3 字節(jié)
  const bytes = len * 0.75;
  // 轉(zhuǎn)換為 KB
  const sizeInKB = bytes / 1024;
  // 返回圖片大小，保留兩位小數(shù)
  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 = `原圖大?。?span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(224, 108, 117); line-height: 26px;">${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

前端圖片壓縮實現(xiàn)指南

簡介

1. HTML 文件設(shè)置

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

<!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/*"/>
<!-- 觸發(fā)壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>

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

2. JavaScript 實現(xiàn)圖片壓縮

2.1 獲取 Base64 圖片大小

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

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

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

我們接著定義一個函數(shù) 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 = `原圖大?。?span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(224, 108, 117); line-height: 26px;">${getBase64ImageSize(reader.result)}KB`;

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

2.3 壓縮圖片

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

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

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

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

      // 設(shè)置 canvas 的大小
      canvas.width = img.width;
      canvas.height = img.height;

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

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

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

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

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

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

2.4 觸發(fā)壓縮操作

最后，我們?yōu)閴嚎s按鈕添加事件監(jiān)聽，觸發(fā)壓縮圖片操作。

// 當點擊按鈕時觸發(fā)壓縮圖片操作
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);
  });
});