利用GifShot JavaScript库创建GIF动画

Oct 14, 2015 JavaScript

之前关于这些技术实现方式是在biu官网上看到的，几张图片播放gif动画是用css3实现的，然后寻找js实现方式，就找到了强大的GifShot。

GifShot是一个JavaScript库,可以从媒体流,视频,或者图片中提取元素创建gif动画。

GifShot优点多多啊~

易于集成
JavaScript库的性质使得它非常便携，易于集成到几乎任何网站(有点像动画gif本身)。
非常高效
通过利用web workers的力量,得到快速创建GIF,不会阻止UI。一个图像量化算法还用于减少所需数量的颜色代表形象。
强大的
利用前沿浏览器api包括WebRTC、文件系统、视频、帆布、Web Workers,类型化数组和Base 64编码支持20多个选项。
可定制的
可以使用自定义构建只包括项目所需的特定功能。

只需要引入gifshot js库，然后撸上下面的代码，就可以实现jpg，png，gif图片转换成gif动画的效果了

&lt;span style="font-size: 14pt;">gifshot.createGIF({
    images: [
        'http://i.imgur.com/2OO33vX.jpg',
        'http://i.imgur.com/qOwVaSN.png',
        'http://i.imgur.com/Vo5mFZJ.gif'
    ]
}, function (obj) {
    if (!obj.error) {
        var image = obj.image, animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});&lt;/span>

就不上更多代码了，因为官网介绍得非常详细。

附上官网地址https://yahoo.github.io/gifshot/