【Web技术】907- 前端图片最优化压缩方案

迷南。 2022-10-22 09:29 213阅读 0赞

![3f963ad63d97731da4f4db641809374e.png][]

> 作者：凉城a
> 
> 原文：https://juejin.cn/post/6940430496128040967

前言

上传图片/视频/文件是我们经常会遇到的问题，但是一旦图片过大就会导致不好的操作体验。图片上传是前端中常见的的业务场景。无论是前台还是后台，适当的对图片进行压缩处理， 可以显著的提升用户体验。而在后台管理系统中，图片压缩不仅仅能够提升后台管理员操作体验，更是可以防止后台设置过大的图片导致前台图片加载过久，从而影响用户体验。

# 关于压缩图片 #

## 思考 ##

想想压缩图片基本流程

*  input 读取到 文件 ，使用 FileReader 将其转换为 base64 编码
 *  新建 img ，使其 src 指向刚刚的 base64
 *  新建 canvas ，将 img 画到 canvas 上
 *  利用 canvas.toDataURL/toBlob 将 canvas 导出为 base64 或 Blob
 *  将 base64 或 Blob 转化为 File

将这些步骤逐个拆解，我们会发现似乎在canvas.toDataURL时涉及到图片质量，那咱们就从这里下手。

## 准备 ##

### HTMLCanvasElement.toDataURL() ###

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

*  如果画布的高度或宽度是0，那么会返回字符串“data:,”。
 *  如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。

### 语法 ###

> canvas.toDataURL(type, encoderOptions);

### 参数 ###

*  type 可选

图片格式，默认为 image/png

*  encoderOptions 可选

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。Chrome支持“image/webp”类型。

## 猜想 ##

可能`toDataURL(type,quality)`的第二个参数(quality)越小，文件体积越小

## 实践 ##

先看下原图信息大小是`7.31kb`

![0ed6846f5404b14054c3369fb9667bf6.png][]

`toDataURL(type,quality)`quality默认0.92看看压缩结果如何

<input id="fileInput" type="file" />
    <img id="img" src="" alt="">
    复制代码

let fileId = document.getElementById('fileInput')
    let img = document.getElementById('img')
    fileId.onchange = function (e) {
      let file = e.target.files[0]
      compressImg(file, 0.92).then(res => {//compressImg方法见附录
        console.log(res)
        img.src = window.URL.createObjectURL(res.file);
      })
    }
    复制代码

`compressImg方法见附录`

![67658e4ea8ef7da2c679e7a9731af2ee.png][] 可以看到图片大小为`8.83kb`压缩后图片反而变大了，这是怎么回事？

看来起初的猜想不完全正确，咱们继续看看。

fileId.onchange = function (e) {
      let file = e.target.files[0]
      compressImg(file, 0.1).then(res => {//compressImg方法见附录
        console.log(res)
        img.src = window.URL.createObjectURL(res.file);
      })
    }
    复制代码

![9ceade3e3b57f6bf1245a03b3acef959.png][] 当`quality`为0.1的时候，图片仅有`1.63kb`,同样的质量也下降了

继续......A long time later

咱们用折线图来看吧更直观

![807d2424f51488ea11c7c0b9dda42ca9.png][] 我又拿了几个图片让他们使用默认值0.92，结果都比原图大

所以说默认值得到的图片往往比原图大

下面看看当`quality`为多少时对图片的压缩效率可以最大化

> 压缩效率最大化，即：在不影响图片质量的情况下最大化压缩

尝试了一系列的图片之后我发现 当`quality`在0.2~0.5之间，图片质量变化并不大，`quality`的值越小，压缩效率越可观（也就是在0.2左右时，压缩图片可以最大化，同时并不对图片质量造成太大影响）

## 结论 ##

经过实践，可以得出结论这个默认值得到的图片往往比原图的图片质量要高。

当`quality`在0.2~0.5之间，图片质量变化并不大，`quality`的值越小，压缩效率越可观（也就是在0.2左右时，压缩图片可以最大化，同时并不对图片质量造成太大影响）

# 附录 #

/**
     * 压缩方法 
     * @param {string} file 文件
     * @param {Number} quality  0~1之间
    */
    function compressImg(file, quality) {
      if (file[0]) {
        return Promise.all(Array.from(file).map(e => compressImg(e,
          quality))) // 如果是 file 数组返回 Promise 数组
      } else {
        return new Promise((resolve) => {
          const reader = new FileReader() // 创建 FileReader
          reader.onload = ({
            target: {
              result: src
            }
          }) => {
            const image = new Image() // 创建 img 元素
            image.onload = async () => {
              const canvas = document.createElement('canvas') // 创建 canvas 元素
              canvas.width = image.width
              canvas.height = image.height
              canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height) // 绘制 canvas
              const canvasURL = canvas.toDataURL('image/jpeg', quality)
              const buffer = atob(canvasURL.split(',')[1])
              let length = buffer.length
              const bufferArray = new Uint8Array(new ArrayBuffer(length))
              while (length--) {
                bufferArray[length] = buffer.charCodeAt(length)
              }
              const miniFile = new File([bufferArray], file.name, {
                type: 'image/jpeg'
              })
              resolve({
                file: miniFile,
                origin: file,
                beforeSrc: src,
                afterSrc: canvasURL,
                beforeKB: Number((file.size / 1024).toFixed(2)),
                afterKB: Number((miniFile.size / 1024).toFixed(2))
              })
            }
            image.src = src
          }
          reader.readAsDataURL(file)
        })
      }
    }
    复制代码

![e19aef1b0a0ec6e8ff1c2d81a648c14c.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![1fece8d4964d4d233a5303657108bb8e.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[3f963ad63d97731da4f4db641809374e.png]: /images/20221022/ebd0769e444848fdbad6e1222e54b5b7.png
[0ed6846f5404b14054c3369fb9667bf6.png]: /images/20221022/5c1d578b5a294357a737df689f992790.png
[67658e4ea8ef7da2c679e7a9731af2ee.png]: /images/20221022/025d2f76d5e3411ba0518d2f1b36d6c7.png
[9ceade3e3b57f6bf1245a03b3acef959.png]: /images/20221022/e15aecfe17d04a8b8c555d311f37c6b0.png
[807d2424f51488ea11c7c0b9dda42ca9.png]: /images/20221022/0a0e550435724914975282972dfae1e8.png
[e19aef1b0a0ec6e8ff1c2d81a648c14c.gif]: /images/20221022/713cfa4b746e461497b819717d88beff.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[1fece8d4964d4d233a5303657108bb8e.gif]: /images/20221022/7a6995d7d58e4e648ec932af549b5ece.png