参考文档:
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压缩图片网上案例挺多的,我也主要是卡在上传七牛服务器上,一直在使用七牛提供的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.f2er.com/ajax/161533.html