采用lrz.mobile.min.js插件，實現圖片壓縮上傳功能，兼容H5和移動端Android，IOS；壓縮率能達到90%以上，圖片清晰度高！(親測可用，兼容性好！)
插件下載地址:http://download.csdn.net/download/weixin_39904091/10172527
代碼示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>base64</title> 6 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 7 8 <script type="text/javascript" src="lrz.mobile.min.js"></script> 9 10 <script type="text/javascript"> 11 $(function(){ 12 console.log("8"); 13 $('#photoAfter').change(function(){ 14 readPhotoAfter(this); 15 }); 16 $("#test").click(function(){ 17 console.log("66"); 18 }); 19 }); 20 21 //圖片壓縮后，base64編碼上傳 22 function readPhotoAfter(obj){ 23 console.log(obj.files[0].size/ 1024 +"kb"); 24 var reader = new FileReader(); 25 reader.readAsDataURL(obj.files[0]); 26 reader.onload = function(e){ 27 //console.log(this.result); //就是base64 28 var dd=this.result; 29 console.log("壓縮前base64長度："+dd.length); 30 31 } 32 lrz(obj.files[0], { 33 width: 800, 34 height: 600, 35 before: function () { 36 console.log('壓縮開始'); 37 }, 38 fail: function (err) { 39 console.error(err); 40 }, 41 always: function () { 42 console.log('壓縮結束'); 43 }, 44 done: function (results) { 45 // 你需要的數據都在這里，可以以字符串的形式傳送base64給服務端轉存為圖片。 46 var data=results.base64; 47 document.getElementById("image").value=data; 48 console.log("編碼后base64長度："+data.length); 49 $("#image").attr("src",data); 50 } 51 }); 52 }; 53 // }); 54 55 56 </script> 57 58 </head> 59 <body> 60 <input type="file" id="photoAfter" /><img id="image" src="" width="200" height="200"/><br/> 61 <input type="button" value="提交" id="test"/> 62 </body> 63 </html>
參考鏈接：http://think2011.net/localResizeIMG/test/