推薦一個用於壓縮圖片的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 οnchange="upload().bind(this)" type="file" accept="image/*" />
    function upload () {
        lrz(this.files[0])
            .then(function (rst) {
                // 處理成功會執行
            })
            .catch(function (err) {
                // 處理失敗會執行
            })
            .always(function () {
                // 不管是成功失敗，都會執行
            });
    });