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

 更新时间:2017年04月21日 14:22:07   作者:衣冠小禽兽   我要评论

这篇文章主要为大家详细介绍了三款不错的图片压缩上传插件,webuploader、移动端上传插件localResizeIMG4以及LUploader)

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

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
});

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

相关文章

最新评论