JS中通过指定大小来压缩图片

栏目: JavaScript · 发布时间: 6年前

内容简介:前不久王二写了一个图片处理库,可以指定图片质量压缩图片,调用的是javaScript的原生方法但是通过质量压缩图片有一些不足之处:比如下图,王二随机选了三张图片做测试(感兴趣的小伙伴可以戳这里自行测试),图中x轴是图片压缩质量,取值0~1,y轴是图片的压缩比:

前不久王二写了一个图片处理库,可以指定图片质量压缩图片,调用的是javaScript的原生方法 toDataURLtoBlob ,库里有如下这些方法:

JS中通过指定大小来压缩图片

但是通过质量压缩图片有一些不足之处: 无法确定压缩后图片的大小

比如下图,王二随机选了三张图片做测试(感兴趣的小伙伴可以戳这里自行测试),图中x轴是图片压缩质量,取值0~1,y轴是图片的压缩比:

JS中通过指定大小来压缩图片

可以看到,在设置相同的压缩图片质量下,每张图片的压缩比率都有所不同;

而在实际开发中,我们可能会有这样的需求: 指定图片大小来压缩图片 。王二在github找了一圈,没发现有实现此方法的js库,于是王二在原来库的基础上又做了一些修改,实现了这个功能。

下图是新库的方法地图:

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

原文地址:王玉略的个人网站


以上所述就是小编给大家介绍的《JS中通过指定大小来压缩图片》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

遗传算法与工程优化

遗传算法与工程优化

程润伟 / 清华大学出版社 / 2004-1 / 39.00元

《遗传算法与工程优化》总结了遗传算法在工业工程相关领域应用的前沿进展。全书共分9章:遗传算法基础、组合优化问题、多目标优化问题、模糊优化问题、可靠性设计问题、调度问题、高级运输问题、网络设计与路径问题和制造元设计问题。内容既涵盖了遗传算法在传统优化问题中的新进展,又涉及了目前在供应链和物流研究中相当热门的话题。一起来看看 《遗传算法与工程优化》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具