创建gif动画插件Gifshot

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

 39357  336  查看评论 (4)
分享到微信朋友圈
X
创建gif动画插件Gifshot ie兼容11

注:此插件需要在服务端运行,本地预览会有跨域问题!

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);
    }
});
相关插件-音频和视频

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 21773  242

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 64056  348

一款简单实用的视频播放插件

虽小却精悍,可自动播放,音乐,视频,支持HTML5
  音频和视频
 133094  443

video封装ui

videoui无任何依赖,代码注释很清楚。
  音频和视频
 55347  380

讨论这个项目(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创建不了啊 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复