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

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    [读书笔记]黑客与画家[Hackers.and.Painters]
    android电池充电以及电量检测驱动分析
    LV在系统重启后不能自动激活(boot.lvm&after.loca)
    线段树菜鸟一题+归并排序【求逆序数】POJ2299
    【PAT】1035. Password (20)
    Android应用开发学习笔记之ContentProvider
    UVAlive 2322 Wooden Sticks(贪心)
    卸载QTP
    线段树模板
    2013 CSU校队选拔赛(1) 部分题解
  • 原文地址:https://www.cnblogs.com/johnjackson/p/14961904.html
Copyright © 2011-2022 走看看