前端实现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 =