js如何将gif图片分解拆开变成静态图片

js如何将gif图片分解拆开变成静态图片


大家都知道gif的可以从视频、照片、摄像头中的创建gif动画,那么gif动画如何逆向拆成单个图片呢,以前我们需要用到后端的库,如何java中的GifDecoder ,php中的GifFrameExtractor,那么有没有办法在浏览器中通过js来拆解gif呢,有,今天我们来试试js来拆解gif

今天用到的js库就是libgif,这是一个很强大的库,可以对gif动画进行播放控制,提取帧数据

下面就是一个示例,可以直接在线运行和编辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            use(["libgif"], function() {
                document.querySelector("#input").onchange= function() {

                    var gifImg = document.createElement('img');
                    // gif库需要img标签配置下面两个属性
                    gifImg.setAttribute('rel:animated_src', URL.createObjectURL(this.files[0]))
                    gifImg.setAttribute('rel:auto_play', '1')

                    var sup1 = new SuperGif({
                        gif: gifImg
                    });
                    sup1.load(function() {
                        $("#result").html("");

                        for (let i = 1; i <= sup1.get_length(); i++) {
                            console.log(i);
                            // 遍历gif实例的每一帧
                            sup1.move_to(i);
                            // 将每一帧的canvas转换成file对象
                            let cur_file = convertCanvasToImage(sup1.get_canvas(), `file-${i}`)

                            $("#result").append("<img src="+ URL.createObjectURL(cur_file)+" />");
                        }

                    });
                }


            });
        });
        dataURLtoFile = function(dataurl, filename) {
            const arr = dataurl.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            var n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {
                type: mime
            });
        };
        // 将canvas转换成file对象
        convertCanvasToImage= function(canvas, filename) {
            return dataURLtoFile(canvas.toDataURL('image/png'), filename);
        };
    </script>

</head>
<body style="background:white;">
    <div class="bfw-mar-l">
        <input type="file" accept="image/gif" id="input" />
        <div id="gifdemo"></div>
        <p>
            每个帧的图片拆开如下,可右键另存为
        </p>
        <div id="result"></div>
    </div>

    <style>
        #result img {
            border: 1px solid grey;
            margin: 5px;

        }
    </style>
</body>
</html>

好了,今天就介绍到这了

{{collectdata}}

网友评论0