Javascript 可以使用類似于 canvas 和 web workers 來實(shí)現(xiàn)圖像壓縮。

使用 canvas，可以將圖像繪制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉(zhuǎn)換為不同格式的圖像。在這些方法中指定圖像質(zhì)量參數(shù)即可實(shí)現(xiàn)壓縮。

使用 web workers，可以在后臺執(zhí)行圖像壓縮，以避免阻塞 UI 線程。

但是 javascript 因?yàn)榘踩拗?，不能操作本地文件，所以一般使用在瀏覽器端上傳圖片，使用js進(jìn)行壓縮處理，上傳到服務(wù)端，后續(xù)處理。

在 Javascript 中進(jìn)行圖像壓縮有一些第三方庫可供使用，比如：

• canvas-toBlob.js: 在不支持 toBlob() 的瀏覽器中提供對 toBlob() 的支持。

• lwip: 一個 Javascript 的圖像處理庫，可以實(shí)現(xiàn)圖像的壓縮，旋轉(zhuǎn)，裁剪等操作

• browser-image-resizer: 基于 canvas 和 web workers 的 Javascript 圖像壓縮庫。

• jpeg-js: 使用 Javascript 實(shí)現(xiàn)的 JPEG 壓縮庫，可以在瀏覽器或 Node.js 環(huán)境中使用。

使用這些庫進(jìn)行壓縮時需要注意的是，它們在性能上可能有所限制。對于大型圖像，壓縮可能需要相當(dāng)長的時間?？赡苄枰谟脩羯蟼鲌D像時顯示加載條或消息，以提醒用戶正在進(jìn)行壓縮。

一、簡單壓縮

使用 Javascript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式。Data URL 是一種將數(shù)據(jù)嵌入 URL 的格式，可以在不需要網(wǎng)絡(luò)請求的情況下直接在瀏覽器中加載圖像。

在調(diào)用 toDataURL() 方法時，可以使用第二個參數(shù)來指定圖像質(zhì)量。該參數(shù)的值應(yīng)該在 0 到 1 之間，表示圖像質(zhì)量的百分比。0 表示最低質(zhì)量，1 表示最高質(zhì)量。

這是一個使用 canvas 和 Javascript 壓縮圖像的示例代碼：

1.  // 獲取 canvas 元素

2.  var canvas = document.getElementById('canvas');

3.  var ctx = canvas.getContext('2d');

4.   

5.  // 創(chuàng)建 Image 對象

6.  var img = new Image();

7.  img.src = 'image.jpg';

8.  img.onload = function() {

9.    // 繪制圖像到 canvas

10.  canvas.width = img.width;

11.  canvas.height = img.height;

12.  ctx.drawImage(img, 0, 0, img.width, img.height);

13. 

14.  // 使用 toDataURL 方法壓縮圖像

15.  var dataUrl = canvas.toDataURL('image/jpeg', 0.5);

16. 

17.  // 使用新的 Data URL 更新圖像

18.  img.src = dataUrl;

19.}

這個例子中，圖片會使用 jpeg 格式壓縮，質(zhì)量為50%，壓縮后的圖片會被重新賦值回img.src里，可以改變其他參數(shù)得到不同的壓縮效果

二、使用canvas 將base64 圖像壓縮到指定文件大小以內(nèi)

1、 方法一

首先使用 atob() 函數(shù)將 base64 圖像數(shù)據(jù)解碼為二進(jìn)制字符串，然后創(chuàng)建一個新的 Blob 對象，并使用 FileReader 讀取 Blob 對象。

接下來，使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，并使用 canvas.toBlob() 方法將圖像轉(zhuǎn)換為 Blob 對象。

最后，檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過，使用不同的圖像質(zhì)量再次壓縮圖像，直到它的大小小于給定的最大大小為止.

下面是一個示例代碼：

1.  var maxSize = 100 * 1024; // 最大文件大小為100KB

2.  var img = new Image();

3.  img.src = base64Image;

4.  img.onload = function () {

5.      var canvas = document.createElement('canvas');

6.      var ctx = canvas.getContext('2d');

7.      var width = img.width;

8.      var height = img.height;

9.      canvas.width = width;

10.    canvas.height = height;

11.    ctx.drawImage(img, 0, 0, width, height);

12.    var quality = 0.8;

13.    var resultBlob;

14.    do {

15.        canvas.toBlob(function (blob) {

16.            resultBlob = blob;

17.        }, 'image/jpeg', quality);

18.        quality -= 0.1;

19.    } while (resultBlob.size > maxSize && quality > 0.1);

20.    // do something with resultBlob, like create a new image from it or save it.

21.}

這個示例代碼使用 canvas 將 base64 圖像壓縮到指定的最大文件大小以內(nèi)。它使用了一個 do-while 循環(huán)來不斷地減小圖像質(zhì)量直到圖像的文件大小符合限制為止。最后它生成了一個 resultBlob 對象，它可以被用來更新頁面上的圖像或者存儲到服務(wù)器上。

值得注意的是，這個示例代碼中進(jìn)行圖像壓縮時的質(zhì)量是每次減少0.1，如果壓縮后的圖像的文件大小仍然超出限制，可能需要調(diào)整這個減少量，或者考慮其他壓縮策略，比如更改圖像的分辨率等。在這個例子中壓縮文件大小是每次只減少0.1，這樣可能會花費(fèi)很長時間，在實(shí)際應(yīng)用中需要根據(jù)需求來進(jìn)行調(diào)整。

2、方法二

遞歸方式可避免循環(huán)導(dǎo)致壓縮處理過程中，頁面提示無法顯示的問題

1.  // 計算base64編碼圖片大小

2.  function getBase64ImageSize(base64) {

3.      const indexBase64 = base64.indexOf('base64,');

4.      if (indexBase64 < 0) return -1;

5.      const str = base64.substr(indexBase64 + 6);

6.      // 大小單位：字節(jié)

7.      return (str.length * 0.75).toFixed(2);

8.  }

9.   

10./**

11. *   圖像壓縮，默認(rèn)同比例壓縮

12. * @param {Object} imgPath

13. *   圖像base64編碼字符串或圖像可訪問路徑

14. * @param {Object} obj

15. *   obj 對象 有 width， height， quality(0-1)

16. * @param {Object} maxSize

17. *   指定壓縮后的文件大小，單位：字節(jié)

18. * @param {Object} callback

19. *   回調(diào)函數(shù)有一個參數(shù)，base64的字符串?dāng)?shù)據(jù)

20. */

21.function compressedImage(path, obj, maxSize, callback) {

22.    let img = new Image();

23.    img.src = imgPath;

24.    img.onload = function () {

25.        const that = this;

26.        // 默認(rèn)按比例壓縮

27.        let w = that.width,

28.            h = that.height,

29.            scale = w / h;

30.        w = obj.width || w;

31.        h = obj.height && obj.height * (w / scale) || h;

32.        // 生成canvas

33.        let canvas = document.createElement('canvas');

34.        let ctx = canvas.getContext('2d');

35.

36.        canvas.width = w;

37.        canvas.height = h;

38.

39.        ctx.drawImage(that, 0, 0, w, h);

40.        // 圖像質(zhì)量，默認(rèn)圖片質(zhì)量為0.8

41.        let quality = 0.8;

42.        if (obj.quality && obj.quality > 0 && obj.quality <= 1) {

43.            quality = obj.quality;

44.        }

45.        // quality值越小，所繪制出的圖像越模糊

46.        let newBase64Image = canvas.toDataURL('image/jpeg', quality);

47.

48.        let fileSize = getBase64ImageSize(newBase64Image);

49.        if (fileSize > maxSize && quality > 0.01) {

50.            if (quality > 0.05) {

51.                quality = quality - 0.05;

52.            } else {

53.                quality = 0.01;

54.            }

55.            compressedImage(imgPath, {

56.                quality: quality

57.            }, maxSize, callback);

58.            return;

59.        }

60.

61.        // 回調(diào)函數(shù)返回壓縮后的 base64圖像

62.        callback(newBase64Image);

63.    }

64.}

三、使用 canvas 和 web workers 來實(shí)現(xiàn)圖像壓縮

Javascript 的 Web Workers API 允許在瀏覽器中創(chuàng)建多個線程，可以在后臺線程中執(zhí)行 Javascript 代碼，而不會影響主線程的響應(yīng)性。因此，可以使用 Web Workers 來執(zhí)行計算密集型任務(wù)，例如圖像壓縮。

下面是一個簡單的示例代碼，展示了如何使用 Web Workers 在后臺線程中執(zhí)行圖像壓縮：

1.  // 在主線程中

2.  var worker = new Worker('worker.js');

3.  worker.onmessage = function(e) {

4.      var compressedImage = e.data;

5.      // do something with compressedImage

6.  };

7.  worker.postMessage({

8.      image: base64Image,

9.      maxSize: 100 * 1024 // 最大文件大小為100KB

10.});

1.  // worker.js

2.  self.onmessage = function(e) {

3.      var image = e.data.image;

4.      var maxSize = e.data.maxSize;

5.      var img = new Image();

6.      img.src = image;

7.      img.onload = function() {

8.          var canvas = document.createElement('canvas');

9.          var ctx = canvas.getContext('2d');

10.        var width = img.width;

11.        var height = img.height;

12.        canvas.width = width;

13.        canvas.height = height;

14.        ctx.drawImage(img, 0, 0, width, height);

15.        var quality = 0.8;

16.        var resultBlob;

17.        do {

18.            canvas.toBlob(function(blob) {

19.                resultBlob = blob;

20.                self.postMessage(resultBlob);

21.            }, 'image/jpeg', quality);

22.            quality -= 0.1;

23.        } while (resultBlob.size > maxSize && quality > 0.1);

24.    }

25.};

這個示例代碼中，在主線程中通過創(chuàng)建一個 Worker 對象并加載一個 worker.js 文件來啟動一個后臺線程. 在 worker.js 中，我們在 onmessage 中定義了圖像壓縮的邏輯，并使用 postMessage 來將壓縮后的圖像發(fā)送回主線程。這樣做的優(yōu)點(diǎn)在于，將圖像壓縮的計算密集型任務(wù)放到了后臺線程中進(jìn)行，可以保證主線程的響應(yīng)性不會受到影響。這樣能夠避免因?yàn)橛嬎忝芗腿蝿?wù)而導(dǎo)致頁面卡頓或延遲。

需要注意的是，Web Workers 不能直接訪問 DOM，所以需要使用 postMessage 在主線程和后臺線程之間傳遞數(shù)據(jù)。

這只是一個簡單的示例，實(shí)際應(yīng)用中可能需要根據(jù)需求進(jìn)行更多的定制。