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 相关文章推荐
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
javascript快速排序算法详解
Sep 17 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
微信小程序实现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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
深入理解React中何时使用箭头函数
2017/08/23 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
单位委托书怎么写
2014/08/02 职场文书
2014年应急工作总结
2014/12/11 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技