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 必填项判断表单是否为空的方法
Sep 14 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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 Try Catch异常测试
2009/03/01 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
说一说Python logging
2016/04/15 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python测试mysql写入性能完整实例
2018/01/18 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python自动发微信监控报警
2019/09/06 Python
Python实现把类当做字典来访问
2019/12/16 Python
python实现人脸签到系统
2020/04/13 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
村长贪污检举信
2014/04/04 职场文书
政府信息公开实施方案
2014/05/09 职场文书
项目投资合作意向书
2014/07/29 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
用Python实现Newton插值法
2021/04/17 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL