zoukankan      html  css  js  c++  java
  • 解决ionic在手机上拍照图片旋转的问题

    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

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    创建可管理的对象属性
    解析简单xml文档
    定义类的__slots__属性节省内存的开销
    读写json数据
    读写csv,excel文件数据
    常用的字符串处理方法
    sql中case when 的使用
    对字典的处理
    元组的元素命名
    列表,字典,集合按条件筛选
  • 原文地址:https://www.cnblogs.com/johnjackson/p/14961904.html
Copyright © 2011-2022 走看看