当前位置:主页 > jquery插件 > 音频视频 >

创建gif动画插件Gifshot

栏目分类:音频视频   模板编号:JQ00035    发布日期:2017-04-20   来源:网络   浏览次数:次     在线预览
Gifshot是一个javascript库,可以从媒体流,视频,或者图片创建gif动画。

注:本地chrome浏览器下有跨域问题,可用ff或ie10以上浏览器本地查看,上专服务器chrome可正常查看


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构建目录中可以找到)

<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': ['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);
    }
});

快照技术

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


在线演示 立即下载
打赏本站
云盘密码:vgxe
相关下载
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载