在浏览器端用H5实现图片压缩上传

一、需求的场景：

在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。
功能实现后我们发现一个问题，公司公共的服务器有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);
}