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 100kbaccuracy: 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中通过指定大小来压缩图片相关推荐

上传图片到OSS，并按指定大小范围压缩图片。完整工具类+三层调用
使用阿里的Oss服务器,做图片服务器. 项目功能为,前端,调用后端的接口,上传用户的图片! 1.controller类 @RestController @RequestMapping("/o ...
如何将图片压缩到指定大小？压缩图片大小的方法
很多报名平台都对图片大小有固定的数值要求,所以不少小伙伴来问,怎么压缩图片200k以下(图片压缩到指定大小图片压缩大小至指定kb以下-压缩图)?想要把图片压缩指定大小就要用到一些比较专业的工具,今天 ...
前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
使用js截取视频指定秒数的图片
使用js截取视频指定秒数的图片点击按钮,选择本地视频后,截取指定秒数的图片运行结果如下图: 直接上代码: 1.html代码 <!DOCTYPE html> <html>&l ...
将页面中的指定 div 下载为图片
文章目录 1. 下载页面div为本地图片 2. 下载页面 div 为本地图片并添加水印 1. 下载页面div为本地图片要将页面中的指定 div 下载为图片,可以使用 JavaScript 的 htm ...
python指定数组大小_在python中创建指定大小的多维数组方式
python中创建指定大小的二维数组,有点像C++中进行动态申请内存创建数组,不过相比较而言,python中更为简单一些. 创建n行m列的二维数组: n = 2 m = 3 matrix = [Non ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)
js常用插件之conversion压缩图片(重点:不改变尺寸大小) 欢迎点击: 个人官网博客图片压缩只是他的一种功能,更多可以查看官方文档重点:压缩体积并且图片尺寸大小是不变的用法很简单: &l ...
GIF图片裁剪出指定大小的GIF图片
前言网购优惠券 www.fenfaw.cn 最近在博客后台上传图片的时候,突然发现上传gif图片的时候裁剪图片有问题.既没法裁剪gif指定区域的图片,又没法裁剪指定区域生成一个新的指定大小的gif图 ...

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

JS中通过指定大小来压缩图片相关推荐

最新文章

热门文章