如何实现JS图片压缩-创新互联

小编这次要给大家分享的是如何实现JS图片压缩，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

成都创新互联专注于企业全网营销推广、网站重做改版、甘谷网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为甘谷等各大城市提供网站开发制作服务。

前言

说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。

压缩思路

涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下：

• 获取上传 Input 中的图片对象 File
• 将图片转换成 base64 格式
• base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍
• 转换后的图片生成对应的新图片，然后输出

优缺点介绍

不过 Canvas 压缩的方式也有着自己的优缺点：

• 优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。
• 缺点：只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果，其他图片格式，仅能通过调节尺寸来实现

代码实现

分享名称：如何实现JS图片压缩-创新互联
文章起源：http://6mz.cn/article/ccdshd.html