使用gif.js根据视频片段生成GIF图

文件引入

根据视频片段来生成GIF需要用到gif.js文件，不多说，在这里先提供下载链接：
gif.js.

简单介绍一下，核心库 gif.js 可以直接将传入 canvas 对象实现截图然后保存为最后 blob 的对象。

<script src="./static/gif.js"></script>

具体实现

gif.js代码片段及用法：

var gif = new GIF({
  workers: 2,
  quality: 10
});

// 添加一个图片元素
gif.addFrame(imageElement);

// 或者添加canvas画布
gif.addFrame(canvasElement, {delay: 200});

// 或者从画布上复制像素下来
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob));
});

gif.render();

具体根据视频来生成gif的实现方法，来看我的demo（实例中我使用了vue）：

var video;
var canvas;
var gif = new GIF({
    workers: 5,
    quality: 10
});
var timer = setInterval(function () {
    console.log('获取');
    video = document.getElementById("video");	//获取页面中的video元素
    canvas = document.createElement("canvas"); // 创建一个画布
    canvas.width = video.videoWidth * 0.1;
    canvas.height = video.videoHeight * 0.1;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // getContext:设置画布环境；drawImage:画画
    var imgurl = canvas.toDataURL("image/png");
    that.igs_src = imgurl; // 获取图片的url
    that.imglist.push(imgurl);	//将每张图片的添加到vue对象imglist中
    if(document.getElementById('video').currentTime>=5){
        var img;
        clearInterval(timer);
        setTimeout(function () {
            img = document.getElementsByClassName('igs');
            for(var i=0;i<img.length;i++){
                gif.addFrame(img[i]);
            }
            gif.on('finished', function(blob) {
                console.log(blob);
                window.open(URL.createObjectURL(blob));
            });
            gif.render();
        },200)
    }
},1000)

大体思路：

先实例化GIF对象，定时器的作用是获取视频中每一秒的截帧图片。根据画布画出每一帧的图片，将其转化为图片格式的url，再将每个图片push到imglist对象中。判断如果播放到第5秒，就停止获取截帧图片。然后通过循环将每个图片元素addFrame到gif中，最后’finished’，gif.render()，至此完成。
具体的根据项目的具体需求再进行相应地更改。

扩展阅读

https://github.com/jnordberg/gif.js