推荐三款不错的图片压缩上传插件(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 相关文章推荐
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Javascript动画效果(3)
Oct 11 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
java script编程起步(第三课)
2007/01/10 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python 多线程应用介绍
2012/12/19 Python
Python的print用法示例
2014/02/11 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
python中的编码知识整理汇总
2016/01/26 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python中adb有什么功能
2020/06/07 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
Python 里最强的地图绘制神器
2021/03/01 Python
2013年保送生自荐信格式
2013/11/20 职场文书
银行员工辞职信范文
2014/01/20 职场文书
军训 自我鉴定
2014/02/03 职场文书
承诺书格式
2014/06/03 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
个人售房合同协议书
2016/03/21 职场文书