lrz压缩图片，上传七牛

参考文档：

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
 * 　　　　┃　　　┃
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　 ┣┓
 * 　　　　┃　　　　 ┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 *
 */

原文地址：https://www.jb51.cc/ajax/161533.html