gif转为帧（gif分解）加分解图片批量打包下载

最新推荐文章于 2024-06-17 20:24:18 发布

蓝格子.

最新推荐文章于 2024-06-17 20:24:18 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/qq_35168861/article/details/110954051

版权

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

9 篇文章 1 订阅

订阅专栏

用到的库：
处理gif图：https://github.com/buzzfeed/libgif-js
图片批量打包下载：https://github.com/dschwen/jszip
https://github.com/eligrey/FileSaver.js

用法：
html

<body>
  <p style="font-size: 28px; text-align: center;font-weight: bold;line-height: 46px;">在线GIF转成帧</p>
    <div class="gifToImg_container">
      <div class="dragImgBox" id="dropZone">
        请拖拽本地文件到此处
      </div>
      <div class="gifToImg_btns">
        <span class="selectGif_btn">选择文件</span>
        <span class="zipdown_btn disabled">打包下载</span>
        <a class="zipbatch_link">批量处理</a>
      </div>
      <div class="gifToImg_res" id="gifToImg_res" style="display: none;"></div>
    </div>
    <input type="file" name="file" accept="image/gif" id="file_sel" value="" style="display: none;" />
    <!-- <img id="gifImg" src="" alt="" style="display: none;"> -->
</body>

引入

<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/libgif.js"></script>
<script src="js/jszip.js"></script>
<script src="js/FileSaver.js"></script>

$(".selectGif_btn").click(function(){
    $("#file_sel").click();
  })
  document.getElementById("file_sel").onchange = function(e){
      var filse = this.files;
      load_gif(filse[0]);
  }
  // 拖拽文件
  var dp = document.querySelector( '#dropZone' );
    document.addEventListener('drop', function (e) {
        e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
        e.preventDefault()
    }, false)
    dp.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = '导入';
    });
    dp.addEventListener("drop", function(e) {
        e.stopPropagation();
        e.preventDefault();
        var file = e.dataTransfer.files;
        imgFile = file[0];
        var fileName = file[0].name;
        _fileName = fileName;
        var fileType = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        var fileFlag;
        if(file.length>1){
            alert("文件只能单个上传")
        }else{
            if(fileType!=="gif"){
              alert("请上传gif图片格式")
            }else{
              load_gif(imgFile);
            }
        }
    });
  // 打包下载
  var zip = new JSZip();//创建实例，zip是对象实例
  var file_name;
  $(".zipdown_btn").click(function(){
    var len=function(arr){
          var l = 0;
          for(var key in arr){
              l++;
          }
          return l;
      }
    for(var i=0;i<img_list.length;i++){
      var dataURL = img_list[i];
      var img_arr = dataURL.split(',');
      //此处为下载压缩包操作
      zip.file(i.toString()+'.jpg',img_arr[1],{base64: true});//根据base64数据在压缩包中生成jpg数据
      var ziplength = len(zip.files);
      if(ziplength==img_list.length){//当所有图片都已经生成打包并保存zip
          zip.generateAsync({type:"blob"})
          .then(function(content) {
              saveAs(content, file_name+".zip");
          });
      }
    }
  })


  function load_gif(gif_source) {
    file_name = gif_source.name.slice(0,gif_source.name.length-4);
    // var gifImg = document.getElementById('gifImg');
    var gifImg = document.createElement("img");
    // gif库需要img标签配置下面两个属性
    gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gif_source))
    gifImg.setAttribute('rel:auto_play', '0')
    // 新建gif实例
    var rub = new SuperGif({ gif: gifImg } );
    var running = false;
    $(".selectGif_btn").text("转换中...");
    $(".selectGif_btn").addClass("disabled");
    rub.load(function(){
      $("#gifToImg_res img").remove();
      img_list = [];
      var j = 0;
      var num = 0;
      // console.log(rub.get_length());
      for (var i=1; i <= rub.get_length(); i++) {
        num++;
        // 遍历gif实例的每一帧
        rub.move_to(i);
        var imgImage = new Image();
        //canvas生成base64图片数据  此处为分解出来的图片base64
        imgImage.src = rub.get_canvas().toDataURL('image/png',1);
        img_list.push(imgImage.src)
        // console.log(imgImage.src)
        var node=document.createElement("img");
        node.src = imgImage.src
        document.getElementById("gifToImg_res").appendChild(node)
      }
      if(num==rub.get_length()){
        $("#gifToImg_res").show();
        $(".selectGif_btn").text("选择文件")
        $(".selectGif_btn").removeClass("disabled");
        $(".zipdown_btn").removeClass("disabled")
      }
    })

  }

end~

蓝格子.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
gif转为帧（gif分解）加分解图片批量打包下载

用到的库：处理gif图：https://github.com/buzzfeed/libgif-js图片批量打包下载：https://github.com/dschwen/jsziphttps://github.com/eligrey/FileSaver.js用法：html<body> <p style="font-size: 28px; text-align: center;font-weight: bold;line-height: 46px;">在线GIF转成帧&
复制链接

扫一扫

专栏目录