本文主要是介绍ios 移动端拍照 旋转问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这段时间开发时发现 ios14 会自动判断图片得方向 ios13及一下 不会 所以需要我们代码去判断
首先需要引入 exif-js
npm install exif-js --save photoChange(el) {this.$vux.loading.show({text: '图片上传中'})var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"var type = file.type.split('/')[0];if ( type === 'image' ){//将图片img转化为base64var that = this;var orientation = ''EXIF.getData(file, function () {orientation = EXIF.getTag(this, 'Orientation');});const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(evt){const base64 = evt.target.result;// 将图片旋转到正确的角度 并压缩console.log('方向',orientation)that.resetOrientation(base64, orientation, function (resultBase64) {that.b64toBlob(resultBase64, function (blob) {//调用接口上传图片that.upload(blob)});});}}else{alert('上传了非图片');}
}resetOrientation(srcBase64, srcOrientation, callback) {var self = thisconst img = new Image();img.onload = function () {const width = img.width,height = img.height,canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');// 判断图片尺寸压缩一定比率const big = (img.width > img.height) ? img.width : img.height;let rate = 1;if (big > 840) {rate = 840 / big;}canvas.width = width * rate;canvas.height = height * rate;// 安卓机不需要矫正图片var u = navigator.userAgent;var ios = 0var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gif (!isAndroid) {ios = navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0}if (isAndroid || ios < 14) {if(srcOrientation && srcOrientation !== 1){// 判断图片方向，压缩并矫正switch (srcOrientation) {// 当图片旋转180°时case 3:ctx.rotate(Math.PI);ctx.drawImage(this, -this.width * rate, -this.height * rate, this.width * rate, this.height * rate);break;// 当图片旋转90°时case 6:canvas.width = this.height * rate;canvas.height = this.width * rate;ctx.rotate(Math.PI / 2);// (0,-imgHeight) 从旋转原理图那里获得的起始点ctx.drawImage(this, 0, -this.height * rate, this.width * rate, this.height * rate);break;// 当图片旋转270°时case 8:canvas.width = this.height * rate;canvas.height = this.width * rate;ctx.rotate(3 * Math.PI / 2);ctx.drawImage(this, -this.width * rate, 0, this.width * rate, this.height * rate);break;default:ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);}}else {ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);}} else if (ios >= 14) {ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);}// 返回 base64callback(canvas.toDataURL('image/jpeg'));};img.src = srcBase64;},b64toBlob(b64, onsuccess, onerror) {let img = new Image();img.onerror = onerror;img.onload = function onload() {const canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;let width = img.width;let height = img.height;let ctx = canvas.getContext('2d');let rate = 1;ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);canvas.toBlob(onsuccess);};img.src = b64;},upload(imgUrl){let self = thisvar formdata = new FormData();formdata.append('file',imgUrl);//下面是要传递的参数formdata.append('assetsNo',this.assetsNo);//下面是要传递的参数this.axios.post(this.apiUrl +'/xxxxxx',formdata,{headers: {'token': this.token,'Content-Type':'multipart/form-data'}//设置header信息}).then((response)=>{if(response.data.errCode==0){self.$vux.loading.hide()self.getInventoryInfo()}else{console.log(response)}}).catch((response)=>{console.log(response);})},
这篇关于ios 移动端拍照 旋转问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
