libgif.js（GIF解析器）来拆分gif图片，显示每一帧

从优秀的 jsgif 项目 ( https://github.com/shachaf/jsgif ) 分叉，该项目被实现为一个书签来操作动画 gif ( http://slbkbs.org/jsgif )。
这是尝试提取 gif 解析和播放逻辑，将其与书签分离，并将其发布为可以在项目中使用的库。

分gif图片

从gif图片test.gif里拆分出每一帧，然后每一帧在网页里查看案例>> 下载案例源码>>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>libgif.js（GIF解析器）来拆分gif图片，显示每一帧</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
</head>

<body>
</body>
<script type="text/javascript" src="libgif.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
var div = document.createElement("div");
var img = document.createElement("img");

div.appendChild(img);
img.src = 'test.gif';
img.onload = function() {
    let is = false
    let arr = []
    var superGif = new SuperGif({ gif: img });
    superGif.load(function() {
        console.log("长度",superGif.get_length()); 
        for(var i=0;i<superGif.get_length();i++){
            superGif.move_to(i)
            var sImg=superGif.get_canvas().toDataURL('image/png');
            console.log(i,)
            $("body").append("<img src='"+ sImg +"'>  ");
            // $("img:eq("+i+")").attr("src",sImg)
        }
    });
    console.log("superGif",superGif) 
}

function handleTest(arr){
    for(var i=0;i<arr.length;i++){
        console.log("arr["+ i +"]",arr[i])
        $("img:eq("+i+")").attr("src",arr[i])
    }
}
</script>

</html>

手动上传一张gif图片，然后从gif图片test.gif里拆分出每一帧，然后每一帧在网页里查看案例>>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>手动上传一张gif图片，然后从gif图片test.gif里拆分出每一帧，然后每一帧在网页里</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
</head>

<body>

    <input type="file" name="file" id="file" value="" />

</body>
<script type="text/javascript" src="libgif.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">

    document.getElementById("file").onchange = function(e){
      var filse = this.files;
      sendFile(filse[0]);
    }
    function sendFile(file){ 
      var reader =new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        hanldeGif(this.result);        
      }
    }

function hanldeGif(imgSrc){ 
    var div = document.createElement("div");
    var img = document.createElement("img");

    div.appendChild(img);
    img.src = imgSrc;
    img.onload = function() {
        let is = false
        let arr = []
        var superGif = new SuperGif({ gif: img });
        superGif.load(function() {
            console.log("长度",superGif.get_length()); 
            for(var i=0;i<superGif.get_length();i++){
                superGif.move_to(i)
                var sImg=superGif.get_canvas().toDataURL('image/png');
                console.log(i,)
                $("body").append("<img src='"+ sImg +"'>  ");
                // $("img:eq("+i+")").attr("src",sImg)
            }
        });
        console.log("superGif",superGif) 
    }
}
</script>

</html>