推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)


Posted in Javascript onApril 21, 2017

涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽:

1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全;至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库。详细的教程网上俯拾即是,这里我就附上一段简单的demo:

<!Doctype html>
<html lang='en'>
<head>
 <meta charset='utf-8'/>
 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
 <title>实验</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  .progress{
   height:50px;
   background-color: red;
  }
 </style>
 <link rel="stylesheet" href="assets/webuploader.css" rel="external nofollow" >
</head>
<body>

 <div class="myuploader">
  <!--用来存放文件信息-->
  <div class="uploader-list">
  </div>
  <!-- 放置按钮 -->
  <div class="btns">
   <div id="picker">选择文件</div>
   <!-- <button class="send">开始上传</button> -->
  </div>
 </div>
 <img src="" alt="" />
 <div class="state"></div>
 <div class="progess"></div>
 
 <script src="assets/jquery-1.12.0.js"></script>
 <script src="assets/webuploader.html5only.min.js"></script>
 <script> 
  // 初始化WebUploader 
  var uploader = WebUploader.create({
   // 选完文件后是否自动上传
   auto:true,   

   // 文件接收的服务端路径
   server:'http://webuploader.duapp.com/server/fileupload.php',

   // 选择文件的按钮
   pick:'#picker',

   // 只允许选择图片文件
   accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/jpg,image/jpeg,image/png' //如果写成image/*会出现响应慢的问题
   },  

   // 配置生成缩略图的选项
   thumb:{
    // 缩略图的宽高,当取值介于0-1时,被当成百分比使用
    width:500,
    height:250,
    // 强制转换成指定的类型
    type:"image/jpeg",
    // 图片质量,只有type为image/jpeg的时候才有效
    quality:70,
    // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false
    allowMagnify:true,
    // 是否允许裁剪
    crop:true   
   },  

   // 是否压缩图片, 默认如果是jpeg文件上传前会压缩,如果是false, 则图片在上传前不进行压缩
   compress:{
    // 压缩后的尺寸
    width: 100,
    height: 100,
    // 图片质量,只有type为image/jpeg的时候才有效。
    quality: 90,
    // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false
    allowMagnify: false,
    // 是否允许裁剪
    crop: false,
    // 是否保留头部meta信息
    preserveHeaders: true,
    // 如果发现压缩后文件大小比原来还大,则使用原来图片,此属性可能会影响图片自动纠正功能
    noCompressIfLarger: false,
    // 单位字节,如果图片大小小于此值,不会采用压缩
    compressSize: 0
   }
  });
  // 监听fileQueued事件来处理UI逻辑,当有一批文件被添加进队列改用filesQueued
  uploader.on('fileQueued', function( file ) {
   // 可以在控制台中查看file对象的详细信息
   console.log(file);
   // 创建缩略图 makeThumb,还可以写成(file,callback,width,height)
   uploader.makeThumb(file,function(error,src) {
    if (error) {
     console.log("不能预览");
     return;
    }else{
     $("img").attr('src',src); 
    }
   });    
  });   
  // 文件上传开始
  uploader.on('startUpload', function(file) {
   $(".state").text('开始');
  });  
  // 文件上传进度
  uploader.on('uploadProgress', function(file,percentage) {
   $(".progress").css('width', percentage * 100 + "%" );
  });    
  // 文件上传成功
  uploader.on('uploadSuccess', function(file) {
   console.log("成功");
   $(".state").text('已上传');
  });
  // 文件上传失败
  uploader.on('uploadError', function(file) {
   console.log("失败");
   $(".state").text('上传出错');
   // 获取文件统计信息
   console.log(uploader.getStats());
   //
   console.log(uploader.getFiles('error'));
  });
  // 文件上传完成
  uploader.on('uploadComplete', function(file) {
   console.log("完成");
   $(".progress").fadeOut();
  });    
 </script>
</body>
</html>

2.移动端的插件,如果能脱离jquery,并且能满足项目的基本需求就再好不过了,这里像localResizeIMG就做得不错,它有4个历史版本,建议引入最新稳定版本localResizeIMG4,demo如下(样式要自己写):

<!Doctype html>
<html lang='en'>
<head>
 <meta charset='utf-8'/>
 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
 <title>实验</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
 </style>
</head>
<body>
 <!-- capture="camera"可以出现拍照;accept="image/*"仅接受图片 -->
 <input type="file" id="file" name="logo" capture="camera" >

 <!-- 一般情况下引入lrz.bundle.js,但绝对不要删除目录下的*.chunk.js,这些文件分别对应了IOS和Android的兼容代码,检测到符合环境时会自动引入,lrz.all.bundle.js是包含了所有引用了,莫名其妙的问题下就引用这个吧 -->
 <script src="assets/lrz.bundle.js"></script>
 <script> 
  // 通过change事件可以得到用户选择的图片
  document.querySelector("input").addEventListener("change",function(){
   // this.files[0]就是用户选择的文件,当做参数传入lrz(file, [options]),或者直接传入图片路径
   // [options]中的width表示图片最大不超过的宽度,默认为原图宽度,height不设时会适应宽度;quality表示图片压缩质量,取值 0 - 1,默认为0.7;fieldName表示后端接收的字段名,默认为 file
   lrz(this.files[0], {width: 1024})
   // 上述返回值是一个promise对象,后面可以接then(rst) catch(err) always()
   .then(function(rst){
    // 通过图片的预加载来实现图片预览
    var img = new Image();// 创建一个Image对象
    // 先绑定onload事件,然后再给src赋值,原因好像是为了解决ie,opera下的兼容问题 
    // 图片加载完毕时异步调用
    img.onload = function () {
     console.log("图片加载完毕")
     img.onload = null; // 解决内存泄漏,同时避免动态图片的事件多次触发 
     document.body.appendChild(img);
    };     
    img.src = rst.base64;// 载入生成后的图片base64
    // 返回rst便于链式调用
    return rst; 
   })
   .then(function(rst){
    // 除了以上的内容,rst.formData表示后端可处理的数据;rst.file表示压缩后的对象;rst.fileLen表示生成后的图片大小;rst.base64Len表示生成后的base的大小;rst.origin表示原始的对象,包括大小,日期等信息    
    console.log(rst.formData)
    //可以在这里写ajax的上传代码,原生和jquery的都可以
    // 返回rst便于链式调用
    return rst;     
   })
   .catch(function(err){
    // 万一出错了,这里可以捕捉到错误信息,而且以上的then都不会执行
    alert(err);
   })
   .always(function(){
    // 不管是成功失败,这里都会执行
    console.log("执行完成")
   })
  })
 </script>
</body>
</html>

3.以上两款优缺点一目了然,本人公司用的是LUploader,纯原生js写的,不依赖任何类库,压缩后的js文件只有5k,实现图片压缩上传只需三步:

(1)在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id:

<div class="LUploader" id="demo1">
  <div class="LUploader-container">
   <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
   <ul class="LUploader-list"></ul>
  </div>
  <div>
   <div class="icon"></div>
   <p>单击上传</p>
  </div>
</div>

(2)将样式文件和js文件引入到页面中:

<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" >
<script src="js/LUploader.js"></script>

(3)js脚本中初始化插件:

new LUploader(这里放需要绑定的input对象作为参数, {
   url: '',//post请求地址
   multiple: false,//是否一次上传多个文件 默认false
   maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
   accept: 'image/jpg,image/jpeg,image/png',//如果写成image/*会出现响应慢的问题
   quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大
   showsize:false//是否显示原始文件大小 默认false
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
优化javascript的执行速度
Jan 23 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 #Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
ES6新特性七:数组的扩充详解
Apr 21 #Javascript
React中ES5与ES6写法的区别总结
Apr 21 #Javascript
You might like
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
Python re模块介绍
2014/11/30 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python 同时读取多个文件的例子
2019/07/16 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python实现KNN近邻算法
2020/12/30 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
公司办公室岗位职责
2014/03/19 职场文书
拔河比赛口号
2014/06/10 职场文书
授权委托书格式范文
2014/08/02 职场文书
公司授权委托书
2014/10/17 职场文书
2016春节家属慰问信
2015/03/25 职场文书