JS如何深入解析并高效实现图片压缩技术？

本文共计2729个文字，预计阅读时间需要11分钟。

原文：本文字实例讲述了JS+图片压缩原理与实现方法。分享给大众提供参考，具体如下：

前言：说起图片压缩，大家可能会想到平时用到的很多工具，例如客户端类具有图片压缩功能。

内容：

1.图片压缩原理

2.图片压缩实现方法

3.常用图片压缩工具介绍

4.客户端图片压缩实现示例

本文实例讲述了JS 图片压缩原理与实现方法。分享给大家供大家参考，具体如下：

前言

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

压缩思路

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

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

优缺点介绍

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

• 优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。