移动端h5页面拍照上传图片的时候图片旋转问题

0. 问题描述

在项目中有个图片上传的组件(vue项目)

<input
   ref="input"
   type="file"
   multiple="false"
   accept="image/*"
   @change="handleChange">

在ios中点击的时候会有一个拍照的选项，但是！！！拍照的时候手机拿的方向不同，上传的图片会出现不同角度的旋转，具体现象如下：

所以我们需要将旋转了的图片再转回来！！！

具体实现思路：
1. 知道图片文件当前的旋转情况
2. 将图片文件旋转指定角度
3. 上传旋转后的文件流

---

1. 步骤一：获取图片文件的旋转情况

每张图片文件都有其对应的数据信息，这里我们通过第三方库exif-js来获取图片的一些信息

(1) 安装依赖

npm i exif-js -D

(2) 写一个获取图片信息的通用方法

import Exif from 'exif-js';

/**
 * @desc 获取图片信息，使用exif.js库，具体用法请在github中搜索
 * @param {Object} file 上传的图片文件
 * @param {String} tag 需要获取的信息 例如：'Orientation'旋转信息
 * @return {Promise<Any>} 读取是个异步操作，返回指定的图片信息
 */
export const getImageTag = (file, tag) => {
   
   
    if (!file) return 0;
    return new Promise((resolve, reject) => {
   
   
        /* eslint-disable func-names */
        // 箭头函数会修改this，所以这里不能用箭头函数
        Exif.getData(file, function () {
   
   
            const o = Exif.getTag(this, tag);
            resolve(o);
        });
    });
};

(3) 调用该方法获取图片的旋转信息

...
// file是表单上传时通过e.target.file获取到的文件流
const or = await getImageTag(file, 'Orientation');