JS中通過指定大小來壓縮圖片

王玉略發表於2018-12-20
JS

前不久王二寫了一個圖片處理庫，可以指定圖片質量壓縮圖片，呼叫的是javaScript的原生方法 toDataURL 和 toBlob，庫裡有如下這些方法：

Alt text

但是通過質量壓縮圖片有一些不足之處：無法確定壓縮後圖片的大小；

比如下圖，王二隨機選了三張圖片做測試(感興趣的小夥伴可以戳這裡自行測試)，圖中x軸是圖片壓縮質量，取值0~1,y軸是圖片的壓縮比：

Alt text

可以看到，在設定相同的壓縮圖片質量下，每張圖片的壓縮比率都有所不同；

而在實際開發中，我們可能會有這樣的需求：指定圖片大小來壓縮圖片。王二在github找了一圈，沒發現有實現此方法的js庫,於是王二在原來庫的基礎上又做了一些修改，實現了這個功能。

下圖是新庫的方法地圖：

Alt text

新庫做了如下優化：

  • 支援png,gif,jpeg型別圖片壓縮
  • 新增downloadFile()方法
  • 可以設定壓縮後圖片的長寬，圖片比例
  • 可以設定壓縮後圖片旋轉方向
  • 通過指定大小來壓縮檔案
  • eslint
  • 用promise，sync/await非同步呼叫

這時候指定大小來壓縮圖片的方法就會變的非常簡單，如下：

//將圖片壓縮到100KB
imageConversion.compressAccurately(file,100);

//還可以加上其他選項，指定壓縮圖片的精確度、型別、寬度、高度、旋轉方向、縮放
imageConversion.compressAccurately(file,{
  size: 100,    //The compressed image size is 100kb
  accuracy: 0.9,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
                //this means if the picture size is set to 1000Kb and the
                //accuracy is 0.9, the image with the compression result
                //of 900Kb-1100Kb is considered acceptable;
  type: "image/png",
  width: 300,
  height: 200,
  orientation:2,
  scale: 0.5,
})
複製程式碼

可以參考 github 瞭解更加詳細的使用方法。

實現 compressAccurately 方法的原理其實很簡單，就是 通過二分法來找到最接近指定大小的那個圖片質量。

如果想親手體驗一下，可以 戳這裡 線上體驗。如果使用有什麼問題，及時提issue給我。

如果覺得還不錯，別忘了來 github star一下哦。

原文地址：王玉略的個人網站

相關文章