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
                    });
                ...

点击查看剩余70%

{{collectdata}}

网友评论0