项目场景：

使用uni-app框架开发移动端H5，功能需求有需要调用手机摄像头拍照识别人脸

问题描述：

苹果手机拍照无异常，安卓手机拍照照片照片显示时会自动旋转90度显示

解决方案：

1.判断手机机型：由于苹果机拍照上传照片不会旋转，如果默认修正，苹果机也会出现旋转异常。

onLoad(options) {//判断设备机型let that = this;(function () {var u = navigator.userAgent;var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器var isiOS = u.indexOf("iPhone") > -1; //苹果手机if (isiOS) {that.tipFlag = "ios";}if (isAndroid) {that.tipFlag = "Android";}})();},

2.导入exif插件

import EXIF from '@/utils/exif.js'

3.uni.chooseImage选择上传图片，获取到res后的blod

data() {return {maxSize:10,resImg:''}},methods: {
insertImage() {uni.chooseImage({count: 1,size:10*1000000,sizeType: ['compressed'],success: (res) => {//这是需求要求的上传限制，可以不要if (parseInt(tempFiles.size) > this.maxSize * 1024 * 1024) {uni.showToast({title: '图片大于'+this.maxSize+'MB！',icon: 'none'})} else {this.resImg = res.tempFilePaths[0]//这就是要的blodthis.detail(this.resImg)} }})},
}

4.调用this.detail方法做图片处理，这里还用到了this.comprossImage图片压缩和this.getImageTag图片方法，以及最后对图片修正处理方法this.rotateImg。

     //url 就是上面获取到的blodasync detail(url){let maxWidth = 500;  let Orientation = 1;  //获取图片META信息  await this.getImageTag(url, 'Orientation', function(e) {  if(e != undefined) Orientation = e;  })  var img = null;  var canvas = null;  await this.comprossImage(url, maxWidth, function(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")this.uploadImg(baseStr)//图片上传到服务器的方法},//-------------------------------直接粘贴的三个方法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;  },//-----------------------------------------------结束uploadImg(tempFilePaths) {console.log(tempFilePaths,"触发上传接口")uni.uploadFile({url: '服务器地址',filePath: tempFilePaths,fileType:"image",header:{"Authorization":'Bearer ' + localStorage.getItem('token')},name: 'file',success: (res) => {uni.hideLoading()let resObj = JSON.parse(res.data)if (resObj.meta.code === 200) {let data = resObj.data.url;console.log(data)} }}

解决安卓机拍照，照片显示自动旋转90度问题相关推荐

exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
解决ios横屏拍照图片自动旋转90度问题
解决ios横屏拍照图片自动旋转90度问题参考文章: (1)解决ios横屏拍照图片自动旋转90度问题 (2)https://www.cnblogs.com/lanshengzhong/p/900856 ...
iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ...
解决 opencv读取手机拍摄的视频可能会自动旋转 90度
手机或者平板拍摄的视频, 在电脑上opencv 读取, 有的视频会自动旋转90度,因为手机可以横着或者竖着拍摄,网上可以用某些api读取图片的exif信息,在根据信息判断是否做旋转,但是我一直读不出 ...
html中如何使图片自动旋转90度,css怎么让图片旋转90度？
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法发布时间:2020-08-31 11:44:39 来源:亿速云阅读:550 作者:小新小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
解决三星调用系统相机拍照显示图片旋转90度横着的问题
最近项目有个功能是调用系统相机拍照上传图片的功能,发现别的手机都没有ok,只有三星的显示图片很明显是旋转了90度,横着的.后来百度了解是三星对android相机单独做了优化(android碎片化,各种 ...
相机获取的照片向左自动旋转90度解决方法
用相机拍摄出来的照片含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息. 如果我们忽略orientation信息,而直接对照片进行像素 ...
iOS照相机获取到的图片自动旋转90度解决办法
情景再现: iOS开发过程中,要实现用用手机摄像头拍一张照片,经过裁剪压缩,然后发出去.结果发出去的图片始终是逆时针旋转了90度的图片. 事出有因: 相机拍照后直接取出来的UIimage(用UIIma ...
Java 图片上传后为什么会自动旋转90度？
问题: 用户反馈上传后的图片方向不对,起初怀疑是本身图片方向有问题,但是用windows图片查看器打开图片方向是"正常"显示的? 分析: windows默认的图片查看器已经帮我们自 ...

解决安卓机拍照，照片显示自动旋转90度问题

项目场景：

问题描述：

解决方案：

解决安卓机拍照，照片显示自动旋转90度问题相关推荐

最新文章

热门文章