这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » HTML5培训视频教程之HTML5+Canvas实现图片的压缩上传

共1条 1/1 1 跳转至

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

菜鸟
2020-12-18 16:21:16     打赏

在任何项目中,图片的上传都是很常用的功能,在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技术交流群:692172929。微信号:codingbb



共1条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]