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