移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能 感情图片

移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能 感情图片

data(){return{files:{name:"",type:""},headerImage:null,picValue:null,upImgUrl,}},//组件方法获取流asynconRead(file){//(file);//();=;//获取文件名=;//获取类型=;//文件流();},//处理图片imgPreview(file){letself=this;letOrientation;//去获取拍照时的信息,解决拍出来的照片旋转问题(file,function(){Orientation=(this,"Orientation");});//看支持不支持FileReaderif(!file||!)return;if(/^image/.test()){//创建一个readerletreader=newFileReader();//将图片2将转成base64格式(file);//读取成功后的回调=function(){//();letresult=;letimg=newImage();=result;//判断图片是否大于500K,是就直接上传,反之压缩图片if(=500*1024){=;();}else{=function(){letdata=(img,Orientation);=data;();};}};}},//压缩图片compress(img,Orientation){letcanvas=("canvas");letctx=("2d");//瓦片canvaslettCanvas=("canvas");lettctx=("2d");//letinitSize=;letwidth=;letheight=;//如果图片大于四百万像素,计算压缩比并将大小压至400万以下letratio;if((ratio=(width*height)/4000000)1){//("大于400万像素");ratio=(ratio);width/=ratio;height/=ratio;}else{ratio=1;}=width;=height;//铺底色="#fff";(0,0,,);//如果图片像素大于100万则使用瓦片绘制letcount;if((count=(width*height)/1000000)1){//("超过100W像素");count=~~((count)+1);//计算要分成多少块瓦片//计算每块瓦片的宽和高letnw=~~(width/count);letnh=~~(height/count);=nw;=nh;for(leti=0;icount;i++){for(letj=0;jcount;j++){(img,i*nw*ratio,j*nh*ratio,nw*ratio,nh*ratio,0,0,nw,nh);(tCanvas,i*nw,j*nh,nw,nh);}}}else{(img,0,0,width,height);}//修复ios上传图片的时候被旋转的问题if(Orientation!=""&&Orientation!=1){switch(Orientation){case6://需要顺时针(向左)90度旋转(img,"left",canvas);break;case8://需要逆时针(向右)90度旋转(img,"right",canvas);break;case3://需要180度旋转(img,"right",canvas);//转两次(img,"right",canvas);break;}}//进行最小压缩letndata=("image/jpeg",);====0;returnndata;},//旋转图片rotateImg(img,direction,canvas){//最小与最大旋转方向,图片旋转4次后回到原方向constmin_step=0;constmax_step=3;if(img==null)return;//img的高度和宽度不能在img元素隐藏后获取,否则会出错letheight=;letwidth=;letstep=2;if(step==null){step=min_step;}if(direction=="right"){step++;//旋转到原位置,即超过最大值stepmax_step&&(step=min_step);}else{step--;stepmin_step&&(step=max_step);}//旋转角度以弧度值为参数letdegree=(step*90*)/180;letctx=("2d");switch(step){case0:=width;=height;(img,0,0);break;case1:=height;=width;(degree);(img,0,-height);break;case2:=width;=height;(degree);(img,-width,-height);break;case3:=height;=width;(degree);(img,-width,0);break;}},//将base64转换为文件dataURLtoFile(dataurl){vararr=(","),bstr=atob(arr[1]),n=,u8arr=newUint8Array(n);while(n--){u8arr[n]=(n);}returnnewFile([u8arr],,{type:});},//这里写接口asyncpostImg(){letfile=();letformData=();("file",file);toast_loding(this,"图片上传中···");try{letres=(,formData,{headers:{"Content-Type":"multipart/form-data"}});}catch(e){(e);}}以上所述是小编给大家介绍的移动端Vue+Vant的Uploader实现上传、压缩、旋转图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!。