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

前不久王二寫了一個圖片處理庫，能夠指定圖片質量壓縮圖片，調用的是javaScript的原生方法 toDataURL 和 toBlob，庫裏有以下這些方法：

可是經過質量壓縮圖片有一些不足之處：沒法肯定壓縮後圖片的大小；

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

能夠看到，在設置相同的壓縮圖片質量下，每張圖片的壓縮比率都有所不一樣；

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

下圖是新庫的方法地圖：

新庫作了以下優化：

• 支持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一下哦。

原文地址：王玉略的我的網站