推薦一個用於壓縮圖片的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 () {
            // 不管是成功失敗，都會執行
        });
});