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

最新推荐文章于 2019-07-12 09:45:49 发布

原创最新推荐文章于 2019-07-12 09:45:49 发布 · 917 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #图片拍照 #图片旋转

ionic 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用exif.js解决Ionic项目中手机拍照后图片旋转90度的问题。通过安装exif.js并将其集成到项目中，可以自动检测图片的旋转角度并在展示时进行修正。

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

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

npm install exif-js --save

2、然后在index.html引入：

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中