如何防止手机上的图像人像翻转

时间:2017-09-26 16:42:17

标签: javascript html css angular

我在移动设备手机上遇到问题只是翻转肖像图片......

我正在使用Angular 2 ......

以下是代码:

<input type="file" name="file" accept="image/*"
 (change)="handleInputChange($event)" multiple>

功能:

handleInputChange(e) {
        var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
        var pattern = /image-*/;

        let joined = this.toArray(this._sharedService.filesProduct).concat(this.toArray(files));
        this._sharedService.filesProduct = joined;

        for (var i = 0; i < files.length; i++) {
            var reader = new FileReader();

            this.loaded = false;

            reader.onload = this._handleReaderLoaded.bind(this);
            reader.readAsDataURL(files[i]);
        }

    }

我认为这是html部分的一些问题,不知道为什么它会在手机上翻转肖像图像。

1 个答案:

答案 0 :(得分:0)

使用默认应用程序(来自Angular's QuickStart),每当您使用Angular运行ng new my-app时,以及此EXIF库exif-js。以下是如何从JPG中读取EXIF数据的示例:

import { Component, Input } from '@angular/core';
import {EXIF} from 'exif-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
    handleInputChange(e) {
        const files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
              fr = new FileReader();
        fr.addEventListener('load', () => {
            const data = fr.result;
            const exif = EXIF.readFromBinaryFile(fr.result);
            console.log(exif);
        });
        fr.readAsArrayBuffer(files[0]);
    }
}