多年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，對(duì)HTML5，node端，前端框架，構(gòu)建工具有濃厚的興趣，目前擔(dān)任專車前端組的技術(shù)負(fù)責(zé)人
一、需求的場(chǎng)景：
在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡(jiǎn)版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。 功能實(shí)現(xiàn)后我們發(fā)現(xiàn)一個(gè)問(wèn)題，公司公共的服務(wù)器有 2M 圖片的限制，而用戶手機(jī)目前絕大多數(shù)都支持高清拍照，尺寸普遍在 3000 x 2000 的大小；
所以我們采用了在瀏覽器端通過(guò) HTML5 的 fileReader 接口來(lái)處理上傳文件的大小，將重新處理壓縮后的文件在傳給后端，這樣在保證了圖片基本質(zhì)量（由于證件圖片，我們只關(guān)心證件號(hào)碼是否清晰）的情況下，也能夠做到網(wǎng)絡(luò)傳輸內(nèi)容的最小化，讓上傳變得更快，給用戶較好的體驗(yàn)。
二、逐步分析：
首先我們上傳的文件在 input 事件的默認(rèn)參數(shù)里面是一個(gè) file 類型，他是 Binary Large Object 的一個(gè)子集，需要將 Blob 類型轉(zhuǎn)換成 DataUrl，能夠被 HTML5 本地的 Canvas 畫(huà)布解析，通過(guò) Canvas 畫(huà)布根據(jù)一定的壓縮比例重新壓縮后，再將圖片轉(zhuǎn)換成 Blob 傳到公司公共的圖片服務(wù)器上。
select local file -> Blob -> DataUrl -> Canvas compress -> DataUrl -> Blob -> Upload file
三、具體實(shí)現(xiàn)邏輯：
1. 監(jiān)聽(tīng)本地 input 框 change 事件，當(dāng)內(nèi)容變化，從回調(diào)函數(shù)的參數(shù)中拿到 file 文件； 2. 判斷當(dāng)前瀏覽器是否支持本地壓縮（是否支持 HTML5 的 fileReader 方法）； 3. 如果不支持本地壓縮，采用傳統(tǒng)方式直接將原始圖片上傳到服務(wù)器上； 4. 如果支持瀏覽器的本地壓縮，那么進(jìn)入到本地壓縮的流程； 5. 壓縮完成后將最新的 blob 類型文件傳遞到公司服務(wù)器上；
// 用戶在瀏覽器本地選擇上傳圖片
/*
* option = {
* el: element, // input file element
* width: 800,
* height: 600,
* rate: 1,
* cb: callback
* }
*
*/
function compressUploadImageAsClient(option) {
var opt = {
el: option.el,
width: option.width || 800,
height: option.height || 600,
rate: option.rate || 1,
cb: option.cb || function() {},
postUrl: option.postUrl || '',
postLoad: option.postLoad || function() {},
postError: option.postError || function() {},
postAbort: option.postAbort || function() {}
};
opt.el.addEventListener('change', function(e) {
// 如果不支持H5的filereader方法，直接用原圖上傳
if(typeof FileReader != 'function') {
// sendFile(e.target.files);
postFileToServer([e.target.files[0]], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
return;
}
// 將blob類型轉(zhuǎn)換成DataUrl
readBlobAsDataURL(e.target.files[0], function(url, size) {
// 拿到url類型的圖片之后，通過(guò)canvas進(jìn)行壓縮轉(zhuǎn)換
readBase64AsBlob({
url: url,
size: size,
width: 800,
height: 600,
rate: 1,
callback: function(dataUrl) {
// 在壓縮完成的回調(diào)函數(shù)中得到最新的圖片DataUrl，將其轉(zhuǎn)換成服務(wù)端接口能夠識(shí)別的Blob類型
var blob = dataURLtoBlob(dataUrl);
// 調(diào)用上傳服務(wù)器圖片的接口
postFileToServer([blob], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
}
});
});
}, false)
}
// file對(duì)象轉(zhuǎn)換成dataurl
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {
callback(e.target.result, blob.size);
};
a.readAsDataURL(blob);
}
// dataurl轉(zhuǎn)換成blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
// blob轉(zhuǎn)換成dataUrl，并且通過(guò)canvas畫(huà)布?jí)嚎s重新生成新的dataUrl
/*
* option: {
* url: image url,
* size: image size,
* width: 800,
* height: 600,
* rate: 1,
* callback: callback
* }
*/
function readBase64AsBlob(option) {
var opt = {
url: option.url,
size: option.size,
width: option.width || 800,
height: option.height || 600,
rate: option.rate || 0.6,
callback: option.callback || function(url) {}
};
var img = new Image();
img.src = opt.url;
img.onload = function(){
var canvas = document.createElement('canvas'), //創(chuàng)建canvas元素
width = img.width, //確保canvas的尺寸和圖片一樣
height = img.height;
console.log('壓縮前圖片的尺寸大?。?, width, height);
// 根據(jù)最大尺寸 800x600的大小，按比例重新設(shè)置圖片的尺寸
var neww = opt.width;
var newh = opt.height;
// 當(dāng)圖片的寬高分別大于800，600的情況下，在對(duì)其進(jìn)行尺寸的壓縮（尺寸壓縮對(duì)最終size的減小有很大作用）
if(width > opt.width && height > opt.height) {
if(height/width > opt.height/opt.width) {
newh = opt.height;
neww = (opt.height/height) * width;
} else {
newh = (opt.width/width) * height;
neww = opt.width;
}
}
// 壓縮率
var rate = opt.rate;
if(opt.size < 1024*1024*2) {
// 小于2m處理;
rate = opt.rate * 0.6;
} else if(opt.size < 1024*1024*4) {
// 2m到4m之間
rate = opt.rate * 0.4;
} else if(opt.size < 1024*1024*8) {
// 4m到8m之間
rate = opt.rate * 0.3;
} else {
// 大于8m的圖片
rate = opt.rate * 0.2;
}
canvas.width = neww;
canvas.height = newh;
canvas.getContext('2d').drawImage(img, 0, 0, neww, newh); //將圖片繪制到canvas中
var dataURL = canvas.toDataURL('image/jpeg', rate); //轉(zhuǎn)換圖片為dataURL
opt.callback(dataURL);
}
}
// 通過(guò)ajax上傳圖片到公司服務(wù)器上
function postFileToServer(files, posturl, success, fail, abort) {
if (!files || files.length < 1) {
alert('上傳的文件不能為空');
return;
}
alert('壓縮后的圖片對(duì)象：' files[0].size);
var formData = new FormData(); // 創(chuàng)建一個(gè)表單對(duì)象FormData
// formData.append('submit', 'Submit'); // 往表單對(duì)象添加文本字段
var fileNames = '';
for (var i = 0; i < files.length; i ) {
var file = files[i]; // file 對(duì)象有 name, size 屬性
formData.append( 'file[' i ']', file); // 往FormData對(duì)象添加File對(duì)象
fileNames = file.name ' ';
}
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
success(e);
}, false);
xhr.addEventListener('error', function(e) {
error(e);
}, false);
xhr.addEventListener('abort', function(e) {
abort(e);
});
xhr.open('post', posturl, true);
xhr.send(formData);
}
聯(lián)系客服
