參考文件：

1.http://blog.csdn.net/zhongbaolin/article/details/49817611

2.https://github.com/think2011/localResizeIMG

3.http://yunzhu.iteye.com/blog/2177923

4.http://blog.csdn.net/inuyasha1121/article/details/51915742

5.https://segmentfault.com/q/1010000005012250?_ea=753141

demo下載地址：http://download.csdn.net/detail/u010947098/9725884

通過lrz壓縮圖片，然後上傳到七牛伺服器。

lrz壓縮圖片網上案例挺多的，我也主要是卡在上傳七牛伺服器上，一直在使用七牛提供的qiniu js sdk來上傳圖片，但是七牛提供的jssdk是在plupload的基礎上擴充套件的，自帶的壓縮功能，只支援jpg壓縮，不支援png；然後就決定使用lrz，但是使用七牛jssdk一直無法上傳到七牛伺服器；最後通過Android上傳七牛伺服器，抓包檢視傳輸的資料包，然後使用ajax非同步請求，傳送FormData資料，成功上傳；通過lrz也完成了圖片的壓縮功能，心裡美美的。

下面貼出我寫的程式碼，程式碼是在lrz專案的基礎上改的供大家參考：

在這裡，感謝參考文件的作者。

window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
    setTimeout(function () {
        var rst = {
            "錯誤資訊：": errMsg,
            "出錯檔案：": scriptURI,
            "出錯行號：": lineNumber,
            "出錯列號：": columnNumber,
            "錯誤詳情：": errorObj
        };

        // alert('出錯了，下一步將顯示錯誤資訊');
        // alert(JSON.stringify(rst, null, 10));
    });
};

[].forEach.call(document.querySelectorAll('[data-src]'), function (el) {
    (function (el) {
        el.addEventListener('click', function () {
            el.src = 'img/loading.gif';

            lrz(el.dataset.src)
                .then(function (rst) {
                    el.src = rst.base64;


                    return rst;
                });
        });

        fireEvent(el, 'click');
    })(el);
});

document.querySelector('input').addEventListener('change', function () {
    var that = this;


    lrz(that.files[0], {width: 800})
        .then(function (rst) {
            var formData = new FormData();
            formData.append("token", "qhdmC1G_UymRGGXSjNRjnlxC9i-RsGQbJokSZjFz:mzflI37NImtAJIkxWFuXksa4JpA=:eyJzY29wZSI6Inlsenl5eSIsImRlYWRsaW5lIjoxNDgzMTAxMzUzfQ==");
            formData.append("file", rst.file);
            $.ajax({
                type: "POST",
                url: "http://upload.qiniu.com/",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function (XMLHttpRequest) {
                    //showLoader();
                },
                success: function (data) {

                    if ("1" == data.error) {
                        alert(data.message);
                        return false;
                    } else {
                        alert(data.thumbnail);

                        return false;
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    hideLoader();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { //上傳失敗
                    //hideLoader();
                    //alert('操作錯誤');
                }
            });
            return rst;
        });
});

document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;

function toFixed2(num) {
    return parseFloat(+num.toFixed(2));
}

/**
 * 替換字串 !{}
 * @param obj
 * @returns {String}
 * @example
 * '我是!{str}'.render({str: '測試'});
 */
String.prototype.render = function (obj) {
    var str = this, reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\!\\{' + v + '\\}', 'g');
        str = str.replace(reg, obj[v]);
    });

    return str;
};

/**
 * 觸發事件 - 只是為了相容演示demo而已
 * @param element
 * @param event
 * @returns {boolean}
 */
function fireEvent(element, event) {
    var evt;

    if (document.createEventObject) {
        // IE瀏覽器支援fireEvent方法
        evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    }
    else {
        // 其他標準瀏覽器使用dispatchEvent方法
        evt = document.createEvent('HTMLEvents');
        // initEvent接受3個引數：
        // 事件型別，是否冒泡，是否阻止瀏覽器的預設行為
        evt.initEvent(event, true, true);
        return !element.dispatchEvent(evt);
    }
}

/**
 *
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
 * 　　　　┃　　　┃    神獸保佑,程式碼無bug
 * 　　　　┃　　　┃
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　 ┣┓
 * 　　　　┃　　　　 ┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 *
 */