推薦一個用於壓縮圖片的JS插件：localResizeIMG

慣例，先貼傳送門：https://github.com/think2011/localResizeIMG

首先說到，爲嘛要壓縮圖片，這需求通常出如今須要上傳照片（尤爲是移動端）的狀況下，如今手機拍出來的照片隨隨便便就是好幾兆，不管3/4G還WIFI要上傳都很吃力，並且實際上也用不着這麼大呀，通常壓縮到個一百幾十k就夠用了。所以，咱們須要在用戶選好照片（多是從相冊中選擇也多是直接拍攝，看我博客的另外一篇文章：html5 api：device's media capture mechanism（設備的媒體捕捉機制）——利用input:file調用設備的照相機/相冊、攝像機、錄音機）後，先用js把照片壓縮好了，再上傳到服務器進行進一步的處理。

js圖片壓縮的原理大同小異，這裏直接引用localResizeIMG官方文檔的原話：

基本原理是經過canvas渲染圖片，再經過 toDataURL 方法壓縮保存爲base64字符串（可以編譯爲jpg格式的圖片）。

這個過程我本身手擼過，代碼不少，更不用提有各類的兼容性坑，因此最後權衡再三仍是直接換成了這個插件。
這插件用起來很簡單（廢話，用起來不簡單還用來幹嗎），傳入照片（能夠是file對象也能夠直接傳圖片路徑），設置好本身想要的分辨率（其實也就是width不超過多少px、heighti不超過多少px），而後再設置個圖片質量，而後就是promise風格的callback了，直接把壓縮後照片的base64傳進callback裏作參數，最後就是拿着這base64愛幹嗎幹嗎去。另外，做者還很貼心的把照片base64編碼的長度也傳參進來了，方便後端校驗圖片是否上傳完整。
具體用法就不貼了，本身傳送門去看唄，這裏放個示例：

<input onchange="upload().bind(this)" type="file" accept="image/*" />
function upload () {
    lrz(this.files[0])
        .then(function (rst) {
            // 處理成功會執行
        })
        .catch(function (err) {
            // 處理失敗會執行
        })
        .always(function () {
            // 無論是成功失敗，都會執行
        });
});