本篇教程探讨了HTML5+Canvas实现图片的压缩上传，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

　　在任何项目中，图片的上传都是很常用的功能，在html5未普及之前，人们用插件来实现这个功能，比如jquery.fileupload.js，这些插件虽然功能强大，但是总觉得挺麻烦。如果你的功能的浏览器要求是在IE10以上，那么不妨用html5的FileReader对象来实现。

       实现流程：

　　获取上传的文件;

　　使用FileReader读取图片，并新建一个Image对象将FileReader读取的图片数据放进去;

　　使用canvas将Image对象等比缩放并写入到画布中，保存为base64格式的数据(这里使用的是FormData对象上传，其实这里已经可以直接将base64的数据通过ajax使用post方法上传到服务器，即可避免下面两个步骤);

　　新建一个Blob对象将base64数据放入;

　　使用FormData对象上传到第三方云储存服务器;

　　使用HTML原生上传图片，下面是踩的一些小坑：

　　accept设定上传文件的类型，这里直接用image/*，不指定具体的后缀名，否则部分安卓手机下无法上传图片;

　　添加multiple属性可选取多张图片(本例只做选取单张图片);

　　capture="camera"属性可以调用摄像头(添加此属性在iPhone下会直接调用摄像头，而不会读取相册;且目前安卓和ios设备使用accept="image/*"均可选择使用摄像头拍照还是使用相册的图片，所以该属性可以忽略)。

　当input文件触发change事件后获取上传的文件

　　functionaddPic(e){

　　if(typeofFileReader==='undefined'){

　　returnalert('你的浏览器不支持上传图片哟!');

　　}

　　varfiles=e.target.files||e.dataTransfer.files;

　　if(files.length>0){

　　imgResize(file[0],callback);

　　}

　　}

　　使用FileReader获取图片数据，并使用canvas压缩

　　ios手机拍照会旋转90度，这里必须判断是否ios手机做出相应处理后再上传

　　functionimgResize(file,callback){

　　varfileReader=newFileReader();

　　fileReader.onload=function(){

　　varIMG=newImage();

　　IMG.src=this.result;

　　IMG.onload=function(){

　　varw=this.naturalWidth,h=this.naturalHeight,resizeW=0,resizeH=0;

　　//maxSize是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低

　　varmaxSize={

　　width:500,

　　height:500,

　　level:0.6

　　};

　　if(w>maxSize.width||h>maxSize.height){

　　varmultiple=Math.max(w/maxSize.width,h/maxSize.height);

　　resizeW=w/multiple;

　　resizeH=w/multiple;

　　}else{

　　//如果图片尺寸小于最大限制，则不压缩直接上传

　　returncallback(file)

　　}

　　varcanvas=document.createElement('canvas'),

　　ctx=canvas.getContext('2d');

　　if(window.navigator.userAgent.indexOf('iPhone')>0){

　　canvas.width=resizeH;

　　canvas.height=resizeW;

　　ctx.rorate(90*Math.PI/180);

　　ctx.drawImage(IMG,0,-resizeH,resizeW,resizeH);

　　}else{

　　canvas.width=resizeW;

　　canvas.height=resizeH;

　　ctx.drawImage(IMG,0,0,resizeW,resizeH);

　　}

　　varbase64=canvas.toDataURL('image/jpeg',maxSize.level);

　　convertBlob(window.atob(base64.split(',')[1]),callback);

　　}

　　};

　　fileReader.readAsDataURL(file);

　　}

　　将base64的数据转换成一个Blob对象

　　安卓手机不支持Blob构造方法

　　functionconvertBlob(base64,callback){

　　varbuffer=newArrayBuffer(base64.length);

　　varubuffer=newUint8Array(buffer);

　　for(vari=0;i

　　ubuffer[i]=base64.charCodeAt(i)

　　}

　　varblob;

　　try{

　　blob=newBlob([buffer],{type:'image/jpg'});

　　}catch(e){

　　window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder;

　　if(e.name==='TypeError'&&window.BlobBuilder){

　　varblobBuilder=newBlobBuilder();

　　blobBuilder.append(buffer);

　　blob=blobBuilder.getBlob('image/jpg');

　　}

　　}

　　callback(blob)

　　}

　　使用HTML5的FormData对象上传数据

　　functioncallback(fileResize){

　　vardata=newFormData();

　　data.append('file',fileResize);

　　varconfig={

　　headers:{'Content-Types':'multipart/form-data'}

　　};

　　//这里用的es6语法发起请求，可以无视

　　axios.post(url,data,config).then().catch(e){}

　　}

　　本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！