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实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
Vue data的数据响应式到底是如何实现的
Feb 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
15种PHP Encoder的比较
2007/04/17 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
Python如何实现文本转语音
2016/08/08 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
请介绍一下Ant
2016/07/22 面试题
装修五一活动策划案
2014/01/23 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
暑假家长评语大全
2014/04/17 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
《法国号》教学反思
2016/02/22 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书