使用 JS 直接截取 视频片段 生成 gif 动画

最近大家对这个表情 非常熟悉。

最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频，所以就干脆直接再进一步，以后直接通过一个库快速生成 gif 。

直接放参考 DEMO 效果

实现原理

其实相对而言，也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。

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

// add an image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

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

gif.render();

除此之外，自己还利用了 daycaca ，它可以将传入的 Video 元素实现转换成 base64 的图片输出。不光支持传入 video ，也可以将 IMG 元素 或者直接一个图片地址进行转码。

 daycaca.base64(this.video, (source, canvas) => {
	      // ...
        this._gif.addFrame(canvas, {delay: intvalTime})
      })

然后我们可以通过 setTimeout/ setInterval 来实现 循环截图，因此你需要设置好自己的 fps, 比较gif和视频比较， gif 不需要那么高的频率，大概每秒 6 帧都是可以接受的。

core-video-to-gif

当然自己进行了一个封装，方便大家在今后的项目使用这样的功能。

core-video-to-gif是一款支持将视频截取为 gif 的前端 JavaSCript 类库。

NPM

$ npm install core-video-to-gif --save

CDN

<script src="./dist/core-video-to-gif.min.js"></script>

在页面中代码：

const v2g = new CoreVideoToGif({
    // specify the video element
    el: document.querySelector('video')
})
v2g.shot({
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})

初始化的参数

“*” 表示必须设置的

API

shot(params, callback)

截取某个片段的截图

 // get current screenshot
v2g.shot( (result) => {
    // ...
    image.src = result
})
// get screenshot from 5s - 8s
v2g.shot({
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})

参数含义

目前还在开发中，后期打算支持上传等功能。

项目地址

扩展阅读

• http://www.zhangxinxu.com/wordpress/2018/05/js-custom-gif-generate/
• https://github.com/jnordberg/gif.js/
• https://github.com/JackPu/daycaca