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