ionic项目使用手机拍照后图片在安卓手机上显示是旋转了90度的,这个时候需要借助外部js-----exif.js
原理就是复用exif这个库获取图片的旋转信息,然后再根据图片的旋转角度调整到正常的角度。
1、先下载 exif.js 到项目中,用 npm 命令行:
npm install exif-js --save
2、然后在index.html引入:
<script src="exif.js"></script>
3、将exif.js文件复制到项目根目录下www文件夹中:
{项目目录}\www
4、html文件中写入:
<img #imgElement src="../assets/icon/3.jpg" (load)="getInfo()" [ngStyle]="{‘transform‘: ‘rotate(‘ + rorateAngle + ‘deg)‘}">
5、ts文件中写入:
import { Component, ViewChild, ElementRef, OnInit } from ‘@angular/core‘
import { EXIF } from ‘exif-js‘
旋转图片的方法:
getInfo() {
console.log(this.imgElement.nativeElement)
let that = this
EXIF.getData(this.imgElement.nativeElement, function(){
const imgInfo = EXIF.getAllTags(this)
const imgRotate = EXIF.getTag(this, ‘Orientation‘)
console.log(imgInfo)
console.log(imgRotate)
switch (imgRotate) {
// 顺时针旋转90度
case 6:
that.rorateAngle = 90
break;
// 逆时针旋转90度
case 8:
that.rorateAngle = -90
break;
case 3:
that.rorateAngle = 180
break;
}
console.log(that.rorateAngle)
})
注意: 因为图片完全加载好才能获取到信息进行旋转,所以要把方法放到load中
————————————————
版权声明:本文为CSDN博主「DIWUCH」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/DIWUCH/article/details/77528569