快捷導(dǎo)航

推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)

更新時(shí)間：2017年04月21日 14:22:07 作者：衣冠小禽獸

這篇文章主要為大家詳細(xì)介紹了三款不錯的圖片壓縮上傳插件，webuploader、移動端上傳插件localResizeIMG4以及LUploader)

涉及到網(wǎng)頁圖片的交互，少不了圖片的壓縮上傳，相關(guān)的插件有很多，相信大家都有用過，這里我就推薦三款，至于好處就仁者見仁嘍：

1.名氣最高的WebUploader，由Baidu FEX 團(tuán)隊(duì)開發(fā)，以H5為主，F(xiàn)LASH為輔，兼容 IE6+，iOS 6+, android 4+，采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率，看了官方文檔就知道，能滿足你所需要的所有功能，一言以蔽之，大而全；至于缺點(diǎn)，大概就是插件體積太大了，自帶樣式文件，而且還要依賴jquery類庫。詳細(xì)的教程網(wǎng)上俯拾即是，這里我就附上一段簡單的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>實(shí)驗(yàn)</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,   

   // 文件接收的服務(wù)端路徑
   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/*會出現(xiàn)響應(yīng)慢的問題
   },  

   // 配置生成縮略圖的選項(xiàng)
   thumb:{
    // 縮略圖的寬高，當(dāng)取值介于0-1時(shí)，被當(dāng)成百分比使用
    width:500,
    height:250,
    // 強(qiáng)制轉(zhuǎn)換成指定的類型
    type:"image/jpeg",
    // 圖片質(zhì)量，只有type為image/jpeg的時(shí)候才有效
    quality:70,
    // 是否允許放大，如果想要生成小圖的時(shí)候不失真，此選項(xiàng)應(yīng)該設(shè)置為false
    allowMagnify:true,
    // 是否允許裁剪
    crop:true   
   },  

   // 是否壓縮圖片, 默認(rèn)如果是jpeg文件上傳前會壓縮，如果是false, 則圖片在上傳前不進(jìn)行壓縮
   compress:{
    // 壓縮后的尺寸
    width: 100,
    height: 100,
    // 圖片質(zhì)量，只有type為image/jpeg的時(shí)候才有效。
    quality: 90,
    // 是否允許放大，如果想要生成小圖的時(shí)候不失真，此選項(xiàng)應(yīng)該設(shè)置為false
    allowMagnify: false,
    // 是否允許裁剪
    crop: false,
    // 是否保留頭部meta信息
    preserveHeaders: true,
    // 如果發(fā)現(xiàn)壓縮后文件大小比原來還大，則使用原來圖片，此屬性可能會影響圖片自動糾正功能
    noCompressIfLarger: false,
    // 單位字節(jié)，如果圖片大小小于此值，不會采用壓縮
    compressSize: 0
   }
  });
  // 監(jiān)聽fileQueued事件來處理UI邏輯，當(dāng)有一批文件被添加進(jìn)隊(duì)列改用filesQueued
  uploader.on('fileQueued', function( file ) {
   // 可以在控制臺中查看file對象的詳細(xì)信息
   console.log(file);
   // 創(chuàng)建縮略圖 makeThumb，還可以寫成(file,callback,width,height)
   uploader.makeThumb(file,function(error,src) {
    if (error) {
     console.log("不能預(yù)覽");
     return;
    }else{
     $("img").attr('src',src); 
    }
   });    
  });   
  // 文件上傳開始
  uploader.on('startUpload', function(file) {
   $(".state").text('開始');
  });  
  // 文件上傳進(jìn)度
  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('上傳出錯');
   // 獲取文件統(tǒng)計(jì)信息
   console.log(uploader.getStats());
   //
   console.log(uploader.getFiles('error'));
  });
  // 文件上傳完成
  uploader.on('uploadComplete', function(file) {
   console.log("完成");
   $(".progress").fadeOut();
  });    
 </script>
</body>
</html>

2.移動端的插件，如果能脫離jquery，并且能滿足項(xiàng)目的基本需求就再好不過了，這里像localResizeIMG就做得不錯，它有4個歷史版本，建議引入最新穩(wěn)定版本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>實(shí)驗(yàn)</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
 </style>
</head>
<body>
 <!-- capture="camera"可以出現(xiàn)拍照；accept="image/*"僅接受圖片 -->
 <input type="file" id="file" name="logo" capture="camera" >

 <!-- 一般情況下引入lrz.bundle.js，但絕對不要刪除目錄下的*.chunk.js，這些文件分別對應(yīng)了IOS和Android的兼容代碼，檢測到符合環(huán)境時(shí)會自動引入，lrz.all.bundle.js是包含了所有引用了，莫名其妙的問題下就引用這個吧 -->
 <script src="assets/lrz.bundle.js"></script>
 <script> 
  // 通過change事件可以得到用戶選擇的圖片
  document.querySelector("input").addEventListener("change",function(){
   // this.files[0]就是用戶選擇的文件，當(dāng)做參數(shù)傳入lrz(file, [options])，或者直接傳入圖片路徑
   // [options]中的width表示圖片最大不超過的寬度，默認(rèn)為原圖寬度，height不設(shè)時(shí)會適應(yīng)寬度；quality表示圖片壓縮質(zhì)量，取值 0 - 1，默認(rèn)為0.7；fieldName表示后端接收的字段名，默認(rèn)為 file
   lrz(this.files[0], {width: 1024})
   // 上述返回值是一個promise對象，后面可以接then(rst) catch(err) always()
   .then(function(rst){
    // 通過圖片的預(yù)加載來實(shí)現(xiàn)圖片預(yù)覽
    var img = new Image();// 創(chuàng)建一個Image對象
    // 先綁定onload事件，然后再給src賦值，原因好像是為了解決ie，opera下的兼容問題 
    // 圖片加載完畢時(shí)異步調(diào)用
    img.onload = function () {
     console.log("圖片加載完畢")
     img.onload = null; // 解決內(nèi)存泄漏，同時(shí)避免動態(tài)圖片的事件多次觸發(fā) 
     document.body.appendChild(img);
    };     
    img.src = rst.base64;// 載入生成后的圖片base64
    // 返回rst便于鏈?zhǔn)秸{(diào)用
    return rst; 
   })
   .then(function(rst){
    // 除了以上的內(nèi)容，rst.formData表示后端可處理的數(shù)據(jù)；rst.file表示壓縮后的對象；rst.fileLen表示生成后的圖片大??；rst.base64Len表示生成后的base的大?。籸st.origin表示原始的對象，包括大小，日期等信息    
    console.log(rst.formData)
    //可以在這里寫ajax的上傳代碼，原生和jquery的都可以
    // 返回rst便于鏈?zhǔn)秸{(diào)用
    return rst;     
   })
   .catch(function(err){
    // 萬一出錯了，這里可以捕捉到錯誤信息，而且以上的then都不會執(zhí)行
    alert(err);
   })
   .always(function(){
    // 不管是成功失敗，這里都會執(zhí)行
    console.log("執(zhí)行完成")
   })
  })
 </script>
</body>
</html>

3.以上兩款優(yōu)缺點(diǎn)一目了然，本人公司用的是LUploader，純原生js寫的，不依賴任何類庫，壓縮后的js文件只有5k，實(shí)現(xiàn)圖片壓縮上傳只需三步：

(1)在html頁面中引入input標(biāo)簽，通過自定義屬性data-LUploader綁定點(diǎn)擊觸發(fā)的標(biāo)簽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對象作為參數(shù), {
   url: '',//post請求地址
   multiple: false,//是否一次上傳多個文件 默認(rèn)false
   maxsize: 102400,//忽略壓縮操作的文件體積上限 默認(rèn)100kb
   accept: 'image/jpg,image/jpeg,image/png',//如果寫成image/*會出現(xiàn)響應(yīng)慢的問題
   quality: 0.1,//壓縮比 默認(rèn)0.1 范圍0.1-1.0 越小壓縮率越大
   showsize:false//是否顯示原始文件大小 默認(rèn)false
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: