HTML5 圖片本地壓縮上傳插件「localResizeIMG」

移動應用中用戶往往需要上傳照片，但是用戶上傳的照片尺寸通常很大，而手機的流量卻很有限，所以在上傳前對圖像進行壓縮是很有必要的。

原生應用可以直接對文件進行處理，網頁應用就沒有這個優勢了。不過 canvas
的出現給出一條新的思路，將圖像按照比例繪製到畫布上，最後將繪製完成的畫布以 base64
編碼方式發送到服務端，再由服務端進行解析還原成圖片。

由於進行處理的過程較爲複雜，於是 localResizeIMG
就孕育而生了，它簡化了前端壓縮圖片的步驟，減輕了前端工程師的工作負擔。Github：https://github.com/think2011/localResizeIMG

localResizeIMG 插件的優勢：
經過大量測試，特別適合在移動設備上使用
基於原生 JavaScript 編寫，支持
AMD 規範 　　

localResizeIMG 的獲取方式：

GitHub：https://github.com/think2011/localResizeIMG 　　
NPM命令：npm install lrz

壓縮圖片：lrz(file, [options]);

　　file 通過 input:file 得到的文件，或者直接傳入圖片路徑

　　[options] 這個參數允許忽略

　　　　width {Number} 圖片最大不超過的寬度，默認爲原圖寬度，高度不設定時會適應寬度

　　　　height {Number} 圖片的最大高度，默認爲原圖高度

　　　　quality {Number} 圖片壓縮質量，取值 0 - 1，默認爲 0.7

　　　　fieldName {String} 後端接收的字段名，默認：file

返回結果：promise 對象

　　then(rst) 處理成功後執行

　　　　rst.formData 後端可處理的數據

　　　　rst.file 壓縮後的file對象，如果壓縮率太低，將會是原始file對象

　　　　rst.fileLen 生成後的圖片的大小，後端可以通過此值來校驗是否傳輸完整

　　　　rst.base64 生成後的圖片base64，後端可以處理此字符串爲圖片，也可以直接用於 img.src = base64

　　　　rst.base64Len 生成後的base64的大小，後端可以通過此值來校驗是否傳輸完整

　　　　rst.origin 也就是原始的file對象，裏面存放了一些原始文件的信息，例如大小、日期等

異步上傳：processData 和 contentType 必須設爲 false，否則服務端不會響應

 <form class="addphoto">
     <div class="file-input">
         <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-text-left">
             <input accept="image/*" id="{{array.str}}" type="file" onchange="angular.element(this).scope().uploadImage(this.files,$(this)[0].id)" />
         </div>
     </div>
 </form>

 $scope.lrzImg = function(data, params) {
     lrz(data, {
         width: 400,
         quality: 0.5
     }).then(function(rst) {
         for (m in $scope.imgArray) {
             if ($scope.imgArray[m].str === params) {
                 $scope.imgArray[m].image.push(rst.base64);
                 break;
             }
         }
         $scope.$apply();
     }).catch(function(err) {
         console.log(err)
     });
 }