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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery中extend函数详解
Feb 13 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
vue 子组件修改data或调用操作
Aug 07 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的ZIP压缩类分享
2014/05/04 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python super()方法原理详解
2020/03/31 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2016年情人节问候语
2015/11/11 职场文书
德劲DE1105机评
2022/04/05 无线电