解决ionic在手机上拍照图片旋转的问题

ionic项目使用手机拍照后图片在安卓手机上显示是旋转了90度的，这个时候需要借助外部js-----exif.js

1、先下载 exif.js 到项目中，用 npm 命令行:

npm install exif-js --save

2、然后在index.html引入：

<script src="exif.js"></script>

3、将exif.js文件复制到项目根目录下www文件夹中：

{项目目录}\www

4、html文件中写入：

[html]  view plain  copy

1. <img #imgElement src="../assets/icon/3.jpg" (load)="getInfo()" [ngStyle]="{'transform': 'rotate(' + rorateAngle + 'deg)'}">  

5、ts文件中写入：

[javascript]  view plain  copy

1. import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'  
2. import { EXIF } from 'exif-js'  

旋转图片的方法：

[javascript]  view plain  copy

1. getInfo() {  
2.     console.log(this.imgElement.nativeElement)  
3.     let that = this  
4.     EXIF.getData(this.imgElement.nativeElement, function(){  
5.       const imgInfo = EXIF.getAllTags(this)  
6.       const imgRotate = EXIF.getTag(this, 'Orientation')  
7.       console.log(imgInfo)  
8.       console.log(imgRotate)  
9.   
10.       switch (imgRotate) {  
11.         // 顺时针旋转90度  
12.         case 6:  
13.          that.rorateAngle = 90  
14.         break;  
15.         // 逆时针旋转90度  
16.         case 8:  
17.           that.rorateAngle = -90  
18.         break;  
19.         case 3:  
20.           that.rorateAngle = 180  
21.         break;  
22.       }  
23.       console.log(that.rorateAngle)  
24.    })  

注意： 因为图片完全加载好才能获取到信息进行旋转，所以要把方法放到load中