JS圖片壓縮詳解

隨著Web應用需求的增加，圖片壓縮變得越來越重要。在Web應用中，圖片的大小會直接影響用戶瀏覽網頁的速度，同時更小的圖片可以減少伺服器存儲空間和傳輸帶寬，提高網頁的載入速度和用戶體驗。本文將從多個方面對JS圖片壓縮做詳細的闡述。

一、JS圖片壓縮流程

JS圖片壓縮的流程通常包括以下幾個步驟：

讀取圖片文件，獲取圖片的base64編碼或二進位數據。
解碼圖片數據，轉換為可以操作的像素數據。
將像素數據進行操作，如壓縮、裁剪、旋轉等。
將處理後的像素數據編碼為圖片格式，如JPEG、PNG等。
將編碼後的圖片數據輸出或存儲到本地或伺服器。

二、JS圖片壓縮到指定大小

JS可以將圖片壓縮到指定的文件大小，以便在Web應用中更好地控制圖片的大小。下面是一個示例代碼：

// 壓縮圖片到指定大小並輸出
function compress(imgData, size) {
  var maxSize = size * 1024; // 轉換為位元組
  var quality = 1; // 初始質量為1
  var compressedData = imgData; // 初始壓縮數據為原始數據
  while (compressedData.length > maxSize && quality > 0) {
    quality -= 0.05; // 降低質量
    compressedData = Canvas2Image.saveAsJPEG(canvas, true, quality).src;
  }
  return compressedData; // 返回壓縮後的圖片數據
}

以上代碼中，imgData為輸入的圖片數據，size為目標文件大小（單位為KB），canvas為Canvas對象，Canvas2Image.saveAsJPEG()為一個Canvas轉換為JPEG的工具函數，true表示使用base64編碼。

三、JS圖片壓縮方法

JS圖片壓縮的方法有很多，其中比較常用的有：

使用Canvas進行壓縮
使用FileReader獲取圖片數據並壓縮
使用第三方庫，如JSZip、pako等

Canvas壓縮的思路就是先將圖片數據繪製到Canvas上，然後再使用Canvas2Image等庫將Canvas轉換為JPEG、PNG等格式。

FileReader方式則是使用JavaScript提供的FileReader API獲取圖片文件，然後使用Canvas等方式進行壓縮處理。

四、JS圖片壓縮演算法

JS圖片壓縮的演算法也有很多，根據不同的場景可以選擇不同的演算法：

質量壓縮：根據JPEG、PNG等圖片格式的編碼規則，減少圖片數據中重複和無用的信息，以降低圖片質量和文件大小。
尺寸壓縮：對圖片進行縮放或裁剪，使得圖片尺寸變小，從而降低文件大小。
色彩壓縮：對於JPEG格式，可以通過減少色彩深度和壓縮色彩空間來降低文件大小。
其他演算法：如哈夫曼編碼、離散餘弦變換等。

五、JS圖片壓縮裁剪

JS可以對圖片進行裁剪，以減少圖片的大小。以下是一個示例裁剪圖片並壓縮的代碼：

// 裁剪圖片並壓縮
function cropAndCompress(src, x, y, width, height, quality) {
  var img = new Image();
  img.src = src;
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
    var compressedData = Canvas2Image.saveAsJPEG(canvas, true, quality).src;
    console.log('compressedData', compressedData);
  };
}

以上代碼中，src為輸入圖片的URL，x、y、width、height分別為裁剪的起始位置和大小，quality為輸出JPEG文件的質量。

六、JS圖片壓縮到200K

以下是一個將圖片壓縮到指定大小的示例代碼：

// 壓縮圖片到指定大小
function compressTo200K(imgData) {
  var maxSize = 200 * 1024; // 目標文件大小
  var quality = 1; // 初始質量為1
  var compressedData = imgData; // 初始壓縮數據為原始數據
  while (compressedData.length > maxSize && quality > 0) {
    quality -= 0.05; // 降低質量
    compressedData = Canvas2Image.saveAsJPEG(canvas, true, quality).src; // 使用Canvas轉換為JPEG格式
  }
  console.log('compressedData', compressedData);
}

以上代碼中，imgData為輸入的圖片數據，canvas為Canvas對象，Canvas2Image.saveAsJPEG()為一個Canvas轉換為JPEG的工具函數，true表示使用base64編碼。

七、JS圖片壓縮軟體

除了前面介紹的JS方法，還有一些JS圖片壓縮軟體可供選擇，如：J-I-C、Pica等。

八、壓縮圖片

JS可以對圖片進行多種方式的壓縮，具體要依據場景選擇不同的方法。以下是一個綜合壓縮的示例代碼：

// 壓縮圖片
function compressImage(src, size) {
  var img = new Image();
  img.src = src;
  img.onload = function() {
    // 獲取原始圖片的像素數據
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var imgData = canvas.toDataURL().replace(/^data:image\/(png|jpeg);base64,/, '');

    // 壓縮圖片到指定大小
    var maxSize = size * 1024; // 轉換為位元組
    var quality = 1; // 初始質量為1
    var compressedData = imgData; // 初始壓縮數據為原始數據
    while (compressedData.length > maxSize && quality > 0) {
      quality -= 0.05; // 降低質量
      compressedData = Canvas2Image.saveAsJPEG(canvas, true, quality).src;
    }

    // 在瀏覽器中顯示壓縮後的圖片
    var compressedImg = new Image();
    compressedImg.src = 'data:image/jpeg;base64,' + compressedData;
    document.body.appendChild(compressedImg);
  };
}

以上代碼中，src為輸入圖片的URL，size為目標文件大小（單位為KB），canvas為Canvas對象，Canvas2Image.saveAsJPEG()為一個Canvas轉換為JPEG的工具函數，true表示使用base64編碼。

九、JS文件壓縮

除了圖片壓縮，JS還可以用於文件壓縮，常用的壓縮庫有：zip.js、JSZip等。

以下是一個使用JSZip壓縮文件的示例代碼：

// 壓縮文件
function compressFile(file) {
  var zip = new JSZip();
  zip.file(file.name, file);
  zip.generateAsync({type:"blob"})
    .then(function(blob) {
      // 下載壓縮後的文件
      var a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = file.name + '.zip';
      a.click();
    }, function(err) {
      console.log('error', err);
    });
}

以上代碼中，file為輸入文件對象，JSZip為JS文件壓縮庫，generateAsync()為生成壓縮文件數據的非同步方法，使用type: "blob"表示生成二進位數據。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/256958.html