多年互联网行业经验，对HTML5，node端，前端框架，构建工具有浓厚的兴趣，目前担任专车前端组的技术负责人
一、需求的场景：
在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。 功能实现后我们发现一个问题，公司公共的服务器有 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);
}
|
