JavaScript 影像壓縮

Advoster發表於2023-01-11
JavaScript

JavaScript 可以使用類似於 canvas 和 web workers 來實現影像壓縮。

使用 canvas，可以將影像繪製到 canvas 上，然後使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉換為不同格式的影像。在這些方法中指定影像質量引數即可實現壓縮。

使用 web workers，可以在後臺執行影像壓縮，以避免阻塞 UI 執行緒。

但是 javascript 因為安全限制，不能操作本地檔案，所以一般使用在瀏覽器端上傳圖片，使用js進行壓縮處理，上傳到服務端，後續處理。

在 JavaScript 中進行影像壓縮有一些第三方庫可供使用，比如：

  • canvas-toBlob.js: 在不支援 toBlob() 的瀏覽器中提供對 toBlob() 的支援。
  • lwip: 一個 JavaScript 的影像處理庫，可以實現影像的壓縮，旋轉，裁剪等操作
  • browser-image-resizer: 基於 canvas 和 web workers 的 JavaScript 影像壓縮庫。
  • jpeg-js: 使用 JavaScript 實現的 JPEG 壓縮庫，可以在瀏覽器或 Node.js 環境中使用。

使用這些庫進行壓縮時需要注意的是，它們在效能上可能有所限制。對於大型影像，壓縮可能需要相當長的時間。可能需要在使用者上傳影像時顯示載入條或訊息，以提醒使用者正在進行壓縮。

一、簡單壓縮

使用 JavaScript 和 canvas 壓縮影像可以使用 canvas 的 drawImage() 方法將影像繪製到 canvas 上，然後使用 toDataURL() 方法將影像轉換為 Data URL 形式。Data URL 是一種將資料嵌入 URL 的格式，可以在不需要網路請求的情況下直接在瀏覽器中載入影像。

在呼叫 toDataURL() 方法時，可以使用第二個引數來指定影像質量。該引數的值應該在 0 到 1 之間，表示影像質量的百分比。0 表示最低質量，1 表示最高質量。

這是一個使用 canvas 和 JavaScript 壓縮影像的示例程式碼:

// 獲取 canvas 元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 建立 Image 物件
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  // 繪製影像到 canvas
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  
  // 使用 toDataURL 方法壓縮影像
  var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
  
  // 使用新的 Data URL 更新影像
  img.src = dataUrl;
}

這個例子中，圖片會使用 jpeg 格式壓縮，質量為50%，壓縮後的圖片會被重新賦值回img.src裡，可以改變其他引數得到不同的壓縮效果

二、使用canvas 將base64 影像壓縮到指定檔案大小以內

1、 方法一

首先使用 atob() 函式將 base64 影像資料解碼為二進位制字串，然後建立一個新的 Blob 物件，並使用 FileReader 讀取 Blob 物件。

接下來，使用 canvas 的 drawImage() 方法將影像繪製到 canvas 上，並使用 canvas.toBlob() 方法將影像轉換為 Blob 物件。

最後，檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過，使用不同的影像質量再次壓縮影像，直到它的大小小於給定的最大大小為止.

下面是一個示例程式碼：

var maxSize = 100 * 1024; // 最大檔案大小為100KB
var img = new Image();
img.src = base64Image;
img.onload = function () {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = img.width;
    var height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    var quality = 0.8;
    var resultBlob;
    do {
        canvas.toBlob(function (blob) {
            resultBlob = blob;
        }, 'image/jpeg', quality);
        quality -= 0.1;
    } while (resultBlob.size > maxSize && quality > 0.1);
    // do something with resultBlob, like create a new image from it or save it.
}

這個示例程式碼使用 canvas 將 base64 影像壓縮到指定的最大檔案大小以內。它使用了一個 do-while 迴圈來不斷地減小影像質量直到影像的檔案大小符合限制為止。最後它生成了一個 resultBlob 物件，它可以被用來更新頁面上的影像或者儲存到伺服器上。

值得注意的是，這個示例程式碼中進行影像壓縮時的質量是每次減少0.1，如果壓縮後的影像的檔案大小仍然超出限制，可能需要調整這個減少量，或者考慮其他壓縮策略，比如更改影像的解析度等。在這個例子中壓縮檔案大小是每次只減少0.1，這樣可能會花費很長時間，在實際應用中需要根據需求來進行調整。
 
2.、方法二

遞迴方式可避免迴圈導致壓縮處理過程中，頁面提示無法顯示的問題

// 計算base64編碼圖片大小
function getBase64ImageSize(base64) {
    const indexBase64 = base64.indexOf('base64,');
    if (indexBase64 < 0) return -1;
    const str = base64.substr(indexBase64 + 6);
    // 大小單位：位元組
    return (str.length * 0.75).toFixed(2);
}

/**
 * 	影像壓縮，預設同比例壓縮
 * @param {Object} imgPath
 *	影像base64編碼字串或影像可訪問路徑
 * @param {Object} obj
 *	obj 物件 有 width， height， quality(0-1)
 * @param {Object} maxSize
 *	指定壓縮後的檔案大小，單位：位元組
 * @param {Object} callback
 *	回撥函式有一個引數，base64的字串資料
 */
function compressedImage(path, obj, maxSize, callback) {
    let img = new Image();
    img.src = imgPath;
    img.onload = function () {
        const that = this;
        // 預設按比例壓縮
        let w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height && obj.height * (w / scale) || h;
        // 生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');

        canvas.width = w;
        canvas.height = h;

        ctx.drawImage(that, 0, 0, w, h);
        // 影像質量，預設圖片質量為0.8
        let quality = 0.8;
        if (obj.quality && obj.quality > 0 && obj.quality <= 1) {
            quality = obj.quality;
        }
        // quality值越小，所繪製出的影像越模糊
        let newBase64Image = canvas.toDataURL('image/jpeg', quality);

        let fileSize = getBase64ImageSize(newBase64Image);
        if (fileSize > maxSize && quality > 0.01) {
            if (quality > 0.05) {
                quality = quality - 0.05;
            } else {
                quality = 0.01;
            }
            compressedImage(imgPath, {
                quality: quality
            }, maxSize, callback);
            return;
        }

        // 回撥函式返回壓縮後的 base64影像
        callback(newBase64Image);
    }
}

三、使用 canvas 和 web workers 來實現影像壓縮

JavaScript 的 Web Workers API 允許在瀏覽器中建立多個執行緒，可以在後臺執行緒中執行 JavaScript 程式碼，而不會影響主執行緒的響應性。因此，可以使用 Web Workers 來執行計算密集型任務，例如影像壓縮。

下面是一個簡單的示例程式碼，展示瞭如何使用 Web Workers 在後臺執行緒中執行影像壓縮：

// 在主執行緒中
var worker = new Worker('worker.js');
worker.onmessage = function(e) {
    var compressedImage = e.data;
    // do something with compressedImage
};
worker.postMessage({
    image: base64Image,
    maxSize: 100 * 1024 // 最大檔案大小為100KB
});

 

// worker.js
self.onmessage = function(e) {
    var image = e.data.image;
    var maxSize = e.data.maxSize;
    var img = new Image();
    img.src = image;
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        var quality = 0.8;
        var resultBlob;
        do {
            canvas.toBlob(function(blob) {
                resultBlob = blob;
                self.postMessage(resultBlob);
            }, 'image/jpeg', quality);
            quality -= 0.1;
        } while (resultBlob.size > maxSize && quality > 0.1);
    }
};

這個示例程式碼中，在主執行緒中透過建立一個 Worker 物件並載入一個 worker.js 檔案來啟動一個後臺執行緒. 在 worker.js 中，我們在 onmessage 中定義了影像壓縮的邏輯，並使用 postMessage 來將壓縮後的影像傳送回主執行緒。這樣做的優點在於，將影像壓縮的計算密集型任務放到了後臺執行緒中進行，可以保證主執行緒的響應性不會受到影響。這樣能夠避免因為計算密集型任務而導致頁面卡頓或延遲。

需要注意的是，Web Workers 不能直接訪問 DOM，所以需要使用 postMessage 在主執行緒和後臺執行緒之間傳遞資料。

這只是一個簡單的示例，實際應用中可能需要根據需求進行更多的定製。

相關文章