解决上传图片，图片会旋转的问题，竖屏拍摄的图片上传之后会变成横向的

背景

最近写了一个功能，用到canvas的绘制图片功能drawImage()。
在绘制图的时候发现有的图片绘制出来和我们想象的并不一样。
比如下面左图是我们预览图片的样子，右图是绘制在canvas上的样子：

后来试了好多图片，发现手机（这里只测试了iphone，据说安卓没有这个问题）拍摄的照片，竖拍的时候会有这个问题，横拍的会正常显示。所以我就想是否可以获取到图片的旋转角度然后再用js给它倒转回去呢，查阅了一些相关资料，发现github上exif这个插件。
下面简要说下用法，具体大家可以去github细看：

1.npm安装和使用：

npm i exif-js --save

import EXIF from 'exif-js';

let file = e.target.files[0];
let rotate = 0;
//file是上传图片的时候获取到的file对象
EXIF.getData(file, function() {
    orientation = this.exifdata.Orientation;
    switch(orientation){
        case 8:
            rotate = (90*Math.PI/180);
            break;
        case 3:
            rotate = (180*Math.PI/180);
            break;
        case 6:
            rotate = (-90*Math.PI/180);
            break;
    }
})

官方也提供了cdn引入的方法：

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

用到的插件exif

https://github.com/exif-js/exif-js