前端gif压缩

最新推荐文章于 2024-12-11 15:18:32 发布

蓝格子.

最新推荐文章于 2024-12-11 15:18:32 发布

阅读量1.5k

点赞数

分类专栏： js图片操作文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_35168861/article/details/111321413

版权

js图片操作专栏收录该内容

9 篇文章

订阅专栏

一开始做这个需求的时候，我在网上看了好多在线压缩gif的工具，基本上都是后台实现的，没看到一个纯前端实现压缩的。
只能自己想办法了，一开始我的思路是：方案一：将gif分解，得到一帧一帧的图片，然后将每帧的图片进行压缩，然后再合并成gif。方案二：将gif分解，然后抽帧，再合并。
两种方案我都试过了，合并出来的gif图更大了，垃圾
后面我只能去gifhub上找了，好不容易找到一个，地址我忘了，找不到了，压缩的js我上传到我的资源里（免费）

gif.js是压缩库
deal.js是下载方法

有了这个库，实现过程就变得很简单了
demo
html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <input type="file" id="file">
</body>
</html>

js引入：

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/gif.js"></script>
<script src="js/deal.js"></script>

<script>
  $(function(){
    $("#file").change(function(e){
      var _file = e.target.files[0];
      console.log(_file)
      if(window.FileReader) {
        var fr = new FileReader();
        fr.readAsArrayBuffer(_file);
        fr.onload = function(e){
          console.log(fr.result)
           var colors=20;
          var result=gifmin(fr.result,colors);
          console.log(result)
          var t = new Blob([result], { 
            type: 'application/octet-stream'
          });
          console.log(t)
          saveAs(t, "1.gif");
        }   
      }
      
    })
  })
</script>