创建gif动画插件Gifshot

所属分类:媒体-音频和视频

 16264  35  查看评论 (4)
创建gif动画插件Gifshot ie兼容11

注:本地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);
    }
});


相关插件-音频和视频

3D音频分析仪

3D音频分析仪,效果那是相当的震撼。
  音频和视频
 11979  81

交互式的唱机

实验模板与一个交互式的老唱机的网络音频API。
  音频和视频
 13805  124

个性暗音乐播放精简版插件

本音乐播放器插件 快适用于快速集成到博客,论坛,网站中去,播放器插件来源于个性暗音乐播放模板的阉割版本,去掉了多余的页面布局。
  音频和视频
 3063  26

jQuery+HTML5类似百度音乐网页播放器代码

一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)
  音频和视频
 28047  152

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    重新连接 0
    2016/7/11 17:07:33
    chuang jian bu l  zen mo shi yong 回复
    (_L.nメ° 0
    2016/6/18 14:06:43
    Kitty.のバガ 0
    2016/4/21 9:04:47
    chrome创建不了啊 回复
取消回复