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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
斜45度寻路实现函数
Aug 20 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
小程序自定义弹框效果
Nov 16 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python如何实现int函数的方法示例
2018/02/19 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python的Jenkins接口调用方式
2020/05/12 Python
什么是python的必选参数
2020/06/21 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
正规的求职信范文分享
2013/12/11 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
大学生操行评语大全
2014/12/31 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Flask搭建一个API服务器的步骤
2021/05/28 Python
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android