一、需求的場景：
在我們的需求中需要有一個在手機瀏覽器端，使用者實現上傳證件照片的功能，我們第一版上了一個最簡版，直接讓使用者在本地選擇圖片，然後上傳到公司公共的伺服器上。
功能實現後我們發現一個問題，公司公共的伺服器有2M圖片的限制，而使用者手機目前絕大多數都支援高清拍照，尺寸普遍在3000+ x 2000+的大小；
所以我們採用了在瀏覽器端通過HTML5的fileReader介面來處理上傳檔案的大小，將重新處理壓縮後的檔案在傳給後端，這樣在保證了圖片基本質量（由於證件圖片，我們只關心證件號碼是否清晰）的情況下，也能夠做到網路傳輸內容的最小化，讓上傳變得更快，給使用者較好的體驗。
二、逐步分析
首先我們上傳的檔案在input事件的預設引數裡面是一個file型別，他是Binary Large Object的一個子集，需要將Blob型別轉換成DataUrl，能夠被HTML5本地的Canvas畫布解析，通過Canvas畫布根據一定的壓縮比例重新壓縮後，再將圖片轉換成Blob傳到公司公共的圖片伺服器上。
select local file -> Blob -> DataUrl -> Canvas compress -> DataUrl -> Blob -> Upload file三、具體實現邏輯
1，監聽本地input框change事件，當內容變化，從回撥函式的引數中拿到file檔案；
2，判斷當前瀏覽器是否支援本地壓縮（是否支援HTML5的fileReader方法）；
3，如果不支援本地壓縮，採用傳統方式直接將原始圖片上傳到伺服器上；
4，如果支援瀏覽器的本地壓縮，那麼進入到本地壓縮的流程；
5，壓縮完成後將最新的blob型別檔案傳遞到公司伺服器上；
// 使用者在瀏覽器本地選擇上傳圖片
/*
* 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型別轉換成DataUrl
readBlobAsDataURL(e.target.files[0], function(url, size) {
// 拿到url型別的圖片之後，通過canvas進行壓縮轉換
readBase64AsBlob({
url: url,
size: size,
width: 800,
height: 600,
rate: 1,
callback: function(dataUrl) {
// 在壓縮完成的回撥函式中得到最新的圖片DataUrl，將其轉換成服務端介面能夠識別的Blob型別
var blob = dataURLtoBlob(dataUrl);
// 呼叫上傳伺服器圖片的介面
postFileToServer([blob], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
}
});
});
}, false)
} // file物件轉換成dataurl
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {
callback(e.target.result, blob.size);
};
a.readAsDataURL(blob);
} // dataurl轉換成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轉換成dataUrl，並且通過canvas畫布壓縮重新生成新的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"), //建立canvas元素
width = img.width, //確保canvas的尺寸和圖片一樣
height = img.height;
console.log(`壓縮前圖片的尺寸大小：`, width, height);
// 根據最大尺寸 800x600的大小，按比例重新設定圖片的尺寸
var neww = opt.width;
var newh = opt.height;
// 當圖片的寬高分別大於800，600的情況下，在對其進行尺寸的壓縮（尺寸壓縮對最終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); //轉換圖片為dataURL
opt.callback(dataURL);
}
} // 通過ajax上傳圖片到公司伺服器上
function postFileToServer(files, posturl, success, fail, abort) {
if (!files || files.length < 1) {
alert(`上傳的檔案不能為空`);
return;
}
alert(`壓縮後的圖片物件：` + files[0].size);
var formData = new FormData(); // 建立一個表單物件FormData
// formData.append(`submit`, `Submit`); // 往表單物件新增文字欄位
var fileNames = ``;
for (var i = 0; i < files.length; i++) {
var file = files[i]; // file 物件有 name, size 屬性
formData.append( `file[` + i + `]`, file); // 往FormData物件新增File物件
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);
}