创建gif动画插件Gifshot

所属分类： JQ特效媒体音频和视频

查看演示立即下载

插件描述：Gifshot是一个javascript库,可以从媒体流,视频,或者图片创建gif动画。

注：此插件需要在服务端运行，本地预览会有跨域问题！

gifshot使用以下技术:

webRTC getUserMedia()API来获得许可使用用户的网络摄像头和操纵CameraStream媒体对象

HTML5处理临时blob URL创建文件系统api

HTML5视频元素流blob的URL

canvas API来创建一个动态的图像从一个HTML5视频或图像

Web workers处理GIF帧

处理二进制图像数据类型的数组

Base 64编码字符串创建一个Base 64编码的图像

浏览器支持

Firefox 17+, Chrome 21+, Opera 18+, Blackberry Browser 10+, Opera Mobile 12+, Chrome For Android 35+, Firefox for Android 29+

动画GIF从现有的视频:

所有现代浏览器(ie 10 +)

从现有动画GIF图片:

所有现代浏览器(ie 10 +)

快速启动

包括gifshot HTML页面(gifshot.js构建目录中可以找到)

1	`<script` `src='gifshot.js'></script>`

开始使用JavaScript API来创建动画gif

// By default, a user's webcam is used to create the animated GIF
gifshot.createGIF({}, function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

例子

网络摄像头

gifshot.createGIF(function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

HTML5 Video

gifshot.createGIF({
    'video': ['example.mp4', 'example.ogv']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

Images

gifshot.createGIF({
    'images': ['/', '/', '/']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

快照技术

gifshot.takeSnapShot(function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： Paper.js 助你实现绚丽的效果
下一个特效： Simditor 富文本编辑器