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


Posted in Javascript onSeptember 10, 2019

使用 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue 实现上传组件
May 31 Vue.js
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 #Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 #Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 #Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 #Javascript
es6中reduce的基本使用方法
Sep 10 #Javascript
layui导出所有数据的例子
Sep 10 #Javascript
解决layui-open关闭自身窗口的问题
Sep 10 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php的header和asp中的redirect比较
2006/10/09 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
初中体育教学反思
2014/01/14 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
校园环保建议书
2014/05/14 职场文书
村党支部公开承诺书
2014/05/29 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
九九重阳节致辞
2015/07/31 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS