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,