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制作Web页面遮罩层插件的实例教程
May 26 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
php后门URL的防范
2013/11/12 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
PHP webshell检查工具 python实现代码
2009/09/15 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python类中super() 的使用解析
2019/12/19 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
周年庆促销方案
2014/03/15 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
地道战观后感400字
2015/06/04 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang