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