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 学习笔记(四)
Dec 31 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
Vue实现手机计算器
Aug 17 Javascript
vue界面发送表情的实现代码
Sep 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
python 自动识别并连接串口的实现
2021/01/19 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
会计自荐信范文
2014/03/09 职场文书
周末问候语大全
2015/11/10 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis