uni 解决部分手机拍照自动旋转90度问题

第一步 cnpm install exif-js --save

//url 就是上面获取到的blod地址  imgname是文件名   这个方法在你选择完照片的调用 吧地址 和名字穿过来
		async detail(url,imgname){
			     let maxWidth = 500;  
			     let Orientation = 1;  
			     //获取图片META信息  
			     await this.getImageTag(url, 'Orientation', (e)=> {  
			         if(e != undefined) Orientation = e;  
			     })  
			     var img = null;  
			     var canvas = null;  
			     await this.comprossImage(url, maxWidth, (e) =>{  
			         img = e.img;  
			         canvas = e.canvas;  
			     })  
			 
			     console.log(Orientation,"Orientation")  
			     let baseStr = '';  
			     //如果方向角不为1,都需要进行旋转  
			     switch(Orientation){  
			         case 6://需要顺时针(向右)90度旋转  
			             baseStr = this.rotateImg(img,'right',canvas);  
			             break;  
			         case 8://需要逆时针(向左)90度旋转   
			             baseStr = this.rotateImg(img,'left',canvas);  
			             break;  
			 
			         case 3://需要180度旋转 转两次  
			             baseStr = this.rotateImg(img,'right',canvas, 2);  
			             break;  
			         default:  
			             baseStr = this.rotateImg(img,'',canvas);  
			             break;  
			     }  
					console.log(baseStr,"baseStr")
					let file = this.base64ToFile(
						baseStr,
						imgname
					);
					console.log(file)
					this.formItem.file=file
		  },
			 //-------------------------------直接粘贴的三个方法
			 	 async comprossImage(imgSrc, maxWidth, func){  
			     if(!imgSrc) return 0;  
			     return new Promise((resolve, reject) => {  
			         uni.getImageInfo({  
			             src: imgSrc,  
			             success(res) {  
			                 let img = new Image();  
			                 img.src = res.path;  
			                 console.log(img)  
			 
			                 let canvas = document.createElement('canvas');  
			 
			                 let obj = new Object();  
			                 obj.img = img;  
			                 obj.canvas = canvas;  
			                 resolve(func(obj));  
			             }  
			         });  
			     })  
			 },
			  /**  
			  * @desc 获取图片信息,使用exif.js库,具体用法请在github中搜索  
			  * @param {Object} file 上传的图片文件  
			  * @param {String} tag 需要获取的信息 例如:'Orientation'旋转信息  
			  * @return {Promise<Any>} 读取是个异步操作,返回指定的图片信息  
			  */  
			getImageTag(file, tag, suc){  
			     if (!file) return 0;  
			     return new Promise((resolve, reject) => {  
			         /* eslint-disable func-names */  
			         // 箭头函数会修改this,所以这里不能用箭头函数  
			         let imgObj = new Image()  
			         imgObj.src = file  
			         console.log(imgObj)  
			         uni.getImageInfo({  
			             src: file,  
			             success(res) {  
			                 EXIF.getData(imgObj, function () {  
			                     EXIF.getAllTags(this);    
			                     let or = EXIF.getTag(this,'Orientation');//这个Orientation 就是我们判断需不需要旋转的值了,有1、3、6、8  
			                     resolve(suc(or))  
			                 });  
			             }  
			         })  
			     });  
			 },
			 	 rotateImg(img, direction, canvas, times = 1){   
			     console.log('开始旋转')  
			     //最小与最大旋转方向,图片旋转4次后回到原方向    
			     var min_step = 0;    
			     var max_step = 3;    
			     if (img == null)return;    
			 
			     //img的高度和宽度不能在img元素隐藏后获取,否则会出错    
			     var height = img.height;    
			     var width = img.width;    
			     let maxWidth = 500;  
			     let canvasWidth = width; //图片原始长宽  
			     let canvasHeight = height;  
			     let base = canvasWidth/canvasHeight;  
			     console.log(maxWidth);  
			     if(canvasWidth > maxWidth){  
			         canvasWidth = maxWidth;  
			         canvasHeight = Math.floor(canvasWidth/base);  
			     }  
			     width = canvasWidth;  
			     height = canvasHeight;  
			     var step = 0;    
			 
			     if (step == null) {    
			       step = min_step;    
			     }    
			 
			     if (direction == 'right') {    
			       step += times;    
			       //旋转到原位置,即超过最大值    
			       step > max_step && (step = min_step);    
			     } else if(direction == 'left'){    
			       step -= times;    
			       step < min_step && (step = max_step);    
			     } else {    //不旋转  
			         step = 0;  
			     }  
			 
			     //旋转角度以弧度值为参数    
			     var degree = step * 90 * Math.PI / 180;    
			     var ctx = canvas.getContext('2d');    
			     console.log(degree)  
			     console.log(step)  
			     switch (step) {      
			       case 1:    
			         console.log('右旋转 90度')  
			         canvas.width = height;    
			         canvas.height = width;    
			         ctx.rotate(degree);    
			         ctx.drawImage(img, 0, -height, width, height);    
			         break;    
			       case 2:    
			         //console.log('旋转 180度')  
			         canvas.width = width;    
			         canvas.height = height;    
			         ctx.rotate(degree);    
			         ctx.drawImage(img, -width, -height, width, height);    
			         break;    
			       case 3:    
			         console.log('左旋转 90度')  
			         canvas.width = height;    
			         canvas.height = width;    
			         ctx.rotate(degree);    
			         ctx.drawImage(img, -width, 0, width, height);  
			         break;    
			       default:  //不旋转  
			         canvas.width = width;  
			         canvas.height = height;  
			         ctx.drawImage(img, 0, 0, width, height);  
			         break;  
			     }  
			 
			     let baseStr = canvas.toDataURL("image/jpeg", 1);  
			     return baseStr;  
			 },
			 
			 ///这个方法吧base64转成文件的方法
			 	base64ToFile(urlData, fileName) {
			//base64转File
			let arr = urlData.split(",");
			let mime = arr[0].match(/:(.*?);/)[1];
			let bytes = atob(arr[1]); // 解码base64
			let n = bytes.length;
			let ia = new Uint8Array(n);
			while (n--) {
				ia[n] = bytes.charCodeAt(n);
			}
			return new File([ia], fileName, {
				type: mime
			});
		},**加粗样式**
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值