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

2023-08-22 12:04:05 69

data(){ return{ files:{ name:"", type:"" }, headerImage:null, picValue:null, upImgUrl, } }, //组件方法获取流 asynconRead(file){ //console.log(file); //console.log(file.file); this.files.name=file.file.name;//获取文件名 this.files.type=file.file.type;//获取类型 this.picValue=file.file;//文件流 this.imgPreview(this.picValue); }, //处理图片 imgPreview(file){ letself=this; letOrientation; //去获取拍照时的信息，解决拍出来的照片旋转问题 Exif.getData(file,function(){ Orientation=Exif.getTag(this,"Orientation"); }); //看支持不支持FileReader if(!file||!window.FileReader)return; if(/^image/.test(file.type)){ //创建一个reader letreader=newFileReader(); //将图片2将转成base64格式 reader.readAsDataURL(file); //读取成功后的回调 reader.onloadend=function(){ //console.log(this.result); letresult=this.result; letimg=newImage(); img.src=result; //判断图片是否大于500K,是就直接上传，反之压缩图片 if(this.result.length<=500*1024){ self.headerImage=this.result; self.postImg(); }else{ img.onload=function(){ letdata=self.compress(img,Orientation); self.headerImage=data; self.postImg(); }; } }; } }, //压缩图片 compress(img,Orientation){ letcanvas=document.createElement("canvas"); letctx=canvas.getContext("2d"); //瓦片canvas lettCanvas=document.createElement("canvas"); lettctx=tCanvas.getContext("2d"); //letinitSize=img.src.length; letwidth=img.width; letheight=img.height; //如果图片大于四百万像素，计算压缩比并将大小压至400万以下 letratio; if((ratio=(width*height)/4000000)>1){ //console.log("大于400万像素"); ratio=Math.sqrt(ratio); width/=ratio; height/=ratio; }else{ ratio=1; } canvas.width=width; canvas.height=height; //铺底色 ctx.fillStyle="#fff"; ctx.fillRect(0,0,canvas.width,canvas.height); //如果图片像素大于100万则使用瓦片绘制 letcount; if((count=(width*height)/1000000)>1){ //console.log("超过100W像素"); count=~~(Math.sqrt(count)+1);//计算要分成多少块瓦片 //计算每块瓦片的宽和高 letnw=~~(width/count); letnh=~~(height/count); tCanvas.width=nw; tCanvas.height=nh; for(leti=0;imax_step&&(step=min_step); }else{ step--; step

总结

以上所述是小编给大家介绍的移动端Vue+Vant的Uploader实现上传、压缩、旋转图片功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

热门推荐

随机推荐