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 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
写给小白看的JavaScript异步
Nov 29 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
JS如何定义用字符串拼接的变量
Jul 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
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Smarty模板语法详解
2019/07/20 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js控制框架刷新
2008/08/01 Javascript
jQuery 选择器理解
2010/03/16 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue实现分页加载效果
2019/12/24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python如何让类支持比较运算
2018/03/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
司马光教学反思
2014/02/01 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
小王子读书笔记
2015/06/29 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android