HTML5培训视频教程之HTML5+Canvas实现图片的压缩上传

2018-04-16 10:08:29 765浏览

在任何项目中，图片的上传都是很常用的功能，在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<base64.length;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){}
　　}

以上就是本文关于HTML5培训视频教程之HTML5+Canvas实现图片压缩上传的全部内容，希望对大家有所帮助，最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>