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给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JavaScript window.location对象
Nov 14 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
Three.js基础部分学习
Jan 08 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
解决Layui中layer报错的问题
Sep 03 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python实现的RSS阅读器实例
2015/07/25 Python
Python语言的变量认识及操作方法
2018/02/11 Python
详解python:time模块用法
2019/03/25 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
春节慰问信范文
2015/02/15 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
Go语言特点及基本数据类型使用详解
2022/03/21 Golang