前端玩转GIF图片压缩

前言

最近接到上级通知，文件如下：

奉天承运，公司诏曰：介于前端组表现优异，后端组忙里偷不出闲，GIF压缩这一块特赐予前端组。

钦此，

不一会后端群众就送来了亲切的问候，千万个草泥马在我的心中奔跑

吃瓜不嫌事大

骂骂咧咧过后，平复下心情，想想思路

抛砖引玉-压缩图片

之前做过图片压缩，无非是把file->base64->新建canvas画图->导出canvas->转file

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

这是常规思路，照这个走走看结果如何

预览图片

实现本地图片预览有两种方法

1.new FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

语法

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

附注

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

function handleFile(e) {
  var file = e.files[0];
  var fileReader = new FileReader();
  var img = document.getElementById(id);
  fileReader.onload = function(e) {
    img.src = e.target.result;
  }
  fileReader.readAsDataURL(file);
}

2.createObjectURL

window.URL.createObjectURL

概述

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

语法

objectURL = window.URL.createObjectURL(blob);

• blob参数是一个File对象或者Blob对象.
• objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

附注

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

function handleFile() {
  var url = window.URL.createObjectURL(file);
  var img = document.getElementById(id);
  img.src = url
  img.onload = function () {
    // 加载完成后销毁url，节省性能
    window.URL.revokeObjectURL(videoUrl);
  }
}

压缩图片

HTMLCanvasElement.toDataURL()

概述

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

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

语法

canvas.toDataURL(type, encoderOptions);
type:图片格式
encoderOptions:在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

附注

function image2Base64(img) {
  var canvas = document.createElement("canvas");
  let w = img.width;
  let h = img.height;
  let quality = 0.5; 
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, w, h);
  var dataURL = canvas.toDataURL("image/png",quality);
  return dataURL;
}
// 将dataURL转化为file对象的函数
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

以这种方式压缩GIF，会让动图变静图...显然是要不走寻常路

真知灼见-GIF图片压缩

准备

查阅资料

在实际情况中，GIF图具有下面的特征

（1）一张图像最多只会包含256个RGB值。

（2）在一张连续动态GIF里，每一帧之间信息差异不大，颜色是被大量重复使用的。

思考分析

• 在存储时，我们用一个公共的索引表，把图片中用到的颜色提取出来，组成一个调色盘，这样，在存储真正的图片点阵时，只需要存储每个点在调色盘里的索引值。

• 如果调色盘放在文件头，作为所有帧公用的信息，就是公共（全局）调色盘，如果放在每一帧的帧信息中，就是局部调色盘。GIF格式允许两种调色盘同时存在，在没有局部调色盘的情况下，使用公共调色盘来渲染。

• 这样，我们可以用调色盘里的索引来代表实际的颜色值。

• 一个256色的调色盘，24bit的颜色只需要用9bit就可以表达了。

• 调色盘还可以进一步减少，128色，64色，etc，相应的压缩率就会越来越大……

• 所谓的每一帧，其实和分辨率差不多，帧数过快也就越清晰同时文件也也大

得出结论

经过查阅资料和分析可以得出想要压缩GIF无非从两方面着手

1. 如果可以接受牺牲图像的部分视觉效果，就可以通过减色来对图像做进一步压缩。

2. 如果可以接受顿挫感（也就是不怎么流畅），就可以通过减帧来对图像做进一步压缩。

实践

1.通过减帧来对图像做进一步压缩。

原图： 可以看到原图大小1823814b

//compressGif方法见附录
compressGif (file,256,classId, uploadId)

减帧压缩后： 可以看到减帧压缩后大小为1617818b

2.在减帧的基础上通过减色来对图像做进一步压缩。

减帧减色压缩后：（极限值只有黑白2种颜色）

//compressGif方法见附录
compressGif (file,2,classId, uploadId)

可以看到减帧压缩后大小为48653b，压缩结果还是非常可观的！

gifmin.js:一个GIF图片压缩库，如果对你有帮助，请点亮你的小星星⭐⭐⭐哦~（疯狂暗示）

超级简单的API，提供手把手教你使用的实例！

gifmin.js下载地址

实战

Vue使用Demo

由于压缩需要一定时间，建议加个loading效果

1. 下载gifmin.min.js到本地，放入静态资源文件夹
2. 在index.html引入

<script src="/lib/gifmin.js"></script>

3. 使用Demo

gifImg(file) {
      const loadings = this.$loading({
        lock: true,
        text: 'GIF图片压缩中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0,0.7)'
      })
      const that = this
      if (window.FileReader) {
        var fr = new FileReader()
        fr.readAsArrayBuffer(file)
        fr.onload = function(e) {
          var colors = 70 // 介于0~256之间数值越小压缩后文件越小
          // eslint-disable-next-line no-undef
          var result = gifmin(fr.result, colors) // 二进制文件流
          console.log(result)
          var obj = new Blob([result], { // 转换成Blob对象
            type: 'application/octet-stream'
          })
          that.gifFile = new window.File([obj], file.name, { // 转换成file文件
            type: file.type
          })
          that.gifUrl = window.URL.createObjectURL(file)
          that.formData.gifUrl = 'yes'
          loadings.close()
        }
      }
    }

压缩GIF后下载，实现在线压缩

/**
 * 下载方法
 * @param {String} blobUrl 需要压缩的GIF文件Blob对象转化的url
 * @param {String} filename 下载文件的文件名
 */
function downloadFileByBlob(blobUrl, filename) {
  const eleLink = document.createElement('a')
  eleLink.download = filename
  eleLink.style.display = 'none'
  eleLink.href = blobUrl
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink);
  // 图片下载后销毁url，节省性能
  window.URL.revokeObjectURL(blobUrl);
}
/**
 * 压缩方法
 * @param {Object} file 需要压缩的GIF文件
 * @param {Number} colors 0~256
 */
function compressGif (file,colors) {
    var _file = file;
    console.log(_file)
    if (window.FileReader) {
      var fr = new FileReader();
      fr.readAsArrayBuffer(_file);
      fr.onload = function (e) {
        console.log(fr.result)//fr.result===e.target.result为ArrayBuffer文件
        var result = gifmin(fr.result, colors);
        console.log(result)
        var obj = new Blob([result], {//转化Blob对象
          type: 'application/octet-stream'
        });
        var blobUrl = window.URL.createObjectURL(obj);
        //调用下载方法
        downloadFileByBlob(blobUrl,'1.gif')
      }
    }
}

jq压缩demo见附录

附录

/**
 * 压缩方法
 * @param {Object} file 需要压缩的GIF文件
 * @param {Number} colors 0~256
 * @param {String} classId  回显div的Id
 * @param {String} uploadId  选择文件input的Id
 */
function compressGif (file,colors,classId, uploadId) {
    var _file = file;
    console.log(_file)
    if (window.FileReader) {
      var fr = new FileReader();
      fr.readAsArrayBuffer(_file);
      fr.onload = function (e) {
        console.log(fr.result)//fr.result===e.target.result为ArrayBuffer文件
        var result = gifmin(fr.result, colors);
        console.log(result)
        var obj = new Blob([result], {//转化Blob对象
          type: 'application/octet-stream'
        });
        console.log(obj)
        const Blob2ImageFileForWXBrowser = new window.File([obj], _file.name, {//将压缩好的GIF转化成file文件
          type: _file.type
        });
        console.log(Blob2ImageFileForWXBrowser)
        var gifUrl = window.URL.createObjectURL(file); //GIF图片回显用
        // 回显图片
        $('.' + classId).siblings().remove();
        if (classId == 'upload-btn') {
          $('.' + classId).before(`<div class="upload-item upload-item-one" style="display:inline-block;margin-right:5px;">
                  <img id="upload-item-one" src="${gifUrl}" index-video='1'>
              </div>`);
        }
        uploadImgs.push(Blob2ImageFileForWXBrowser);//添加到上传参数中
        $('#' + uploadId).val('');
        $('#upload-item-one').onload = function () {
          // 如果不生效，请在模态框关闭时销毁
          // 加载完成后销毁url，节省性能
          window.URL.revokeObjectURL(gifUrl);
        }
      }
    }
}

写在最后

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

如果你想了解更多，请点这里，期待你的小⭐⭐

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注