js获取 gif 的帧数的代码实例

使用 javascript 获取 GIF 图的帧数，如果帧数过大，则不让传到服务器

这里是使用一个插件： github地址为： https://github.com/buzzfeed/libgif-js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

    </style>
  </head>
  <body>
    <input type="file" name="file" id="file" value="" />

  </body>
  <script type="text/javascript" src="js/libgif.js"></script>
  <script type="text/javascript">

    document.getElementById("file").onchange = function(e){
      var filse = this.files;
      sendFile(filse[0]);
    }
    function sendFile(file){
      var reader =new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        var div = document.createElement("div");
        var img = document.createElement("img");
        div.appendChild(img);
        img.src = this.result;
        img.onload = function(){
          var rub = new SuperGif({ gif: img} );
          rub.load(function(){
            console.log(rub.get_length());

          });
        }
      }
    }
  </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript帧动画(实例讲解)

    javascript帧动画(实例讲解)

    前面的话 帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容.本文将详细介绍javascript帧动画 概述 [分类] 常见的帧动画的方式有三种,包括gif.CSS3 animation和javascript git和CSS3 animation不能灵活地控制动画的暂停和播放.不能对帧动画做更加灵活地扩展.另外,gif图不能捕捉动画完成的事件.所以,

  • 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com","text":"test","orgId":123,"dataType":"curry","activeClass":"haha"}]'; JSON.parse(str); 结果

  • nodejs实现截取上传视频中一帧作为预览图片

    客户有个上传视频的需求,上传的视频呢,需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图,成品如下图所示: 当然了,上传视频的界面就不贴出来了,毕竟我们这篇文章的重点不在于如何上传,而在于如何用nodejs截取视频中的帧!~ 这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg,需要安装在服务器上由nodejs调用, 代码贴出如下: function fecthVideoThumbnail(entryid, index){ var filename = p

  • 使用JS和canvas实现gif动图的停止和播放代码

    使用JS和canvas实现gif动图的停止和播放代码

    HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现图片马赛克,模糊,色值过滤等很多图片特效.我们这里不用那么复杂,只要读取我们的图片,重绘下就可以. HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn

  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    本文实例讲述了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能.分享给大家供大家参考,具体如下: 根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系. 测试例子: var test={ a:"ss", b:"dd", c:[ {dd:"css",ee:"cdd"}, {mm:"ff",nn:

  • 复杂的javascript窗口分帧解析

    什么是窗口分帧? 窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件,每个帧(即页面)都有自己的url. 帧窗口该如何创建? 帧通常是由<frameset>和<frame>标记创建的.但在HTML 4中,<iframe>标记也可以用来在文档中创建"内联帧".就JavaScript来说,<iframe>创建的帧与<frameset>和<frame>创建的帧一样. 在HTML中用<

  • 详解关于JSON.parse()和JSON.stringify()的性能小测试

    JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象.至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的.本文要探究的是,这行代码的执行效率如何?如果随意使用会不会造成一些问题? 先上两个js性能测试的依赖函数 /** * 一个简单的断言函数 * @param value {Boolean} 断言条件 *

  • js获取 gif 的帧数的代码实例

    使用 javascript 获取 GIF 图的帧数,如果帧数过大,则不让传到服务器 这里是使用一个插件: github地址为: https://github.com/buzzfeed/libgif-js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" con

  • JS实现获取GIF总帧数的方法详解

    JS实现获取GIF总帧数的方法详解

    目录 前言 写在前面 思路分析 什么是Gif 组成结构 解析原理 数据块分析 Header Block Logical Screen Descriptor Global Color Table Graphics Control Extension Image Descriptor Image Data 实现代码 测试用例 插件地址 前言 有一个Gif图片,我们想要获取它的总帧数,超过一定帧数的图片告知用户不可上传,在服务端有很多现成的库可以使用,这种做法不是很友好,前端需要先将gif上传至服务端

  • JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有: obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getC

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

  • JS获取随机数和时间转换的简单实例

    Math.floor(Math.random()*10);//产生10以内的随机数 new Date(); //获取当前时间(字符串类型) new Date().getTime(); //获取当前的毫秒数 new Date(1356334057000) ;//通过毫秒数创建时间 new Date().getMonth()+1; //获取月份,从0开始,所以要加上1 new Date().getFullYear(); //获取年份 new Date().getDay()+1;//获取当前是星期X,

  • js 获取json数组里面数组的长度实例

    作为一个前端页面开发者第一次处理json数据,遇到了'js 获取json数组里面数组的长度'?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋友帮助,但是最近尝试自己去解决遇到的问题. 我遇到的问题是这样的:***.jsp结尾的页面里面,后端传给我的json数据是一个数组,然后要获取第二个数组contacts里面的数组长度,然后百度发现 json没有.length属性.怎么办呢? 既然json对象没有length属性,如果要知道他的长度怎

  • Spring MVC获取查询参数及路径参数代码实例

    这篇文章主要介绍了Spring MVC获取查询参数及路径参数代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Jsp页面 query.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %> <html> &l

  • java从命令行获取数据的三种方式代码实例

    java从命令行获取数据的三种方式代码实例

    这篇文章主要介绍了java从命令行获取数据的三种方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种:利用Scanner对象 import java.util.Scanner; public class TestInputOuput { public static void main(String[] args) { System.out.println("请输入:"); Scanner inp = new Scanne

  • js获取表格的行数和列数的方法

    如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: <table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> <tr> <td> </td> <td> </td> <td> </

  • iOS开发中使app获取本机通讯录的实现代码实例

    iOS开发中使app获取本机通讯录的实现代码实例

    一.在工程中添加AddressBook.framework和AddressBookUI.framework 二.获取通讯录 1.在infterface中定义数组并在init方法中初始化 复制代码 代码如下: NSMutableArray *addressBookTemp;   - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {     addressBookTemp = [NSMut

随机推荐