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.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
Express.JS使用详解
Jul 17 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
十天学会php(3)
2006/10/09 PHP
PHP制作图型计数器的例子
2006/10/09 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python算法题 链表反转详解
2019/07/02 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
一个入门级python爬虫教程详解
2021/01/27 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
管理科学大学生求职信
2013/11/13 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
大三学习计划书范文
2014/05/02 职场文书
实验室标语
2014/06/21 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android