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

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