html5 canvas压缩上传图片,HTML5+Canvas实现图片的压缩上传详解

本篇教程探讨了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.οnlοad=function(){

varIMG=newImage();

IMG.src=this.result;

IMG.οnlοad=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频道！