为什么使用HTML5相机在画布上的Fabricjs中自动加载图像？

Question

我使用HTML5 camera（）并使用Fabricjs在画布上加载。

我在移动网络（iphone6s / chrome）中使用它拍摄照片工作正常但是使用Fabricjs在画布上加载不能正常工作（它会逆时针自动旋转90度）

这是我的代码

import React from 'react';
import { fabric, freeDrawingBrush, Canvas, Image, isDrawingMode, clipTo, drawImage } from 'fabric';
import $ from 'jquery'
import EXIF from 'exif'

class PhotoEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            file: '',
            imagePreviewURL: ''
        };
        this._handleImageChange = this._handleImageChange.bind(this);
        this._handleSubmit = this._handleSubmit.bind(this);
        this._handlePhoto = this._handlePhoto.bind(this);
    }
    _handleSubmit(e) {
        e.preventDefault();
    }

    _handleImageChange(e) {
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                file: file,
                imagePreviewURL: reader.result
            });
        }
        reader.readAsDataURL(file)
    }


    _handlePhoto() {


        const canvas = document.getElementById('c');
        const ctx = canvas.getContext('2d');
        const img = document.createElement('IMG');

        FileReader.onloadend = function() {
            var exif = EXIF.readFromBinaryFile(new BinaryFile(this.state));
            switch(exif.Orientation){

                case 2:
                // horizontal flip
                    ctx.translate(canvas.width, 0);
                    ctx.scale(-1, 1);
                    break;
                case 3:
                // 180° rotate left
                    ctx.translate(canvas.width, canvas.height);
                    ctx.rotate(Math.PI);
                    break;
                case 4:
                // vertical flip
                    ctx.translate(0, canvas.height);
                    ctx.scale(1, -1);
                    break;
                case 5:
                // vertical flip + 90 rotate right
                    ctx.rotate(0.5 * Math.PI);
                    ctx.scale(1, -1);
                    break;
                case 6:
                // 90° rotate right
                    ctx.rotate(0.5 * Math.PI);
                    ctx.translate(0, -canvas.height);
                    break;
                case 7:
                // horizontal flip + 90 rotate right
                    ctx.rotate(0.5 * Math.PI);
                    ctx.translate(canvas.width, -canvas.height);
                    ctx.scale(-1, 1);
                    break;
                case 8:
                // 90° rotate left
                    ctx.rotate(-0.5 * Math.PI);
                    ctx.translate(-canvas.width, 0);
                    break;
                }
            };
        ctx.restore(this.state);


        img.onload = function() {
            const OwnCanv = new fabric.Canvas('c', {
                isDrawingMode: true
            });

            canvas.width = img.width;
            canvas.height = img.height;

            const imgInstance = new fabric.Image(img, {
                async: false,
                left: 0,
                top: 0,
                lockMovementX: true,
                lockMovementY: true
             });
            OwnCanv.add(imgInstance);


            OwnCanv.freeDrawingBrush.color = "purple"
            OwnCanv.freeDrawingBrush.width = 5

            OwnCanv.on('path:created', function(option) {
                const path = option.path;
                OwnCanv.isDrawingMode = false;
                OwnCanv.remove(imgInstance);
                OwnCanv.remove(path);
                OwnCanv.clipTo = function(ctx) {
                    path.render(ctx);
                };
                OwnCanv.add(imgInstance);
             });
        }

     img.src = this.state.imagePreviewURL;
    }


    render() {

         return (
             <div>
                 <form onSubmit={this._handleSubmit}>
                     <input id="photo" type="file" accept="image/*" capture="camera" onChange={this._handleImageChange} />
                     <button type="submit" onClick={this._handlePhoto}>edit</button>
                 </form>
                 <canvas id="c"></canvas>
             </div>
             )
    }
}



module.exports = PhotoEdit;