在显示上传完毕的图片的时候遇到了一个问题, 图片莫名其妙被逆时针旋转了90度就很离谱
如下图
经过一番查询, 原来是 IOS 的相机拍照的时候会把方向角写入到图片里面
因为我用的是 element 的上传组件, 所以先去找了找 issue, 果不其然在 Issues #15162有人和我提出了同样的问题, 官方给的回答是 Sorry, we have no plan to support this.
所以只能尝试自己修复了
基础思路就是
- 获取图片的方向角
- 将图片在
canvas
画出 - 旋转到正常位置
- 导出为
DataURL
DataURL
转换为File
上传
获取旋转角#
这里我们会用到 exif-js 这个库来获取图片的 orientation (方向角), 如果方向角不为 0 , 就需要吧方向角改回 0
先使用 EXIF.getData
解析图片, 然后 EXIF.getTag
拿到 Orientation
返回, 为了调用方便都包装成 Promise
Orientation 对照表#
Orientation 值 | 旋转角度 |
---|---|
1 | 0° |
6 | 顺时针90° |
8 | 逆时针90° |
3 | 180° |
这时候我们进行判断, 如果 Orientation = 6 那么我们就进行下面的调整
调整图片#
由于我们拿到的是 File 没法直接使用, 需要先变成 Image 对象
下面的代码参考 VUE uses element UI’s upload component when ios uploads image rotation 90 degrees, 有所修改
去除方向角#
原作者这里是把图片旋转了, 这里只画出来去除了方向角
直接在画布上面画出来, 然后导出
转换为 file#
从base64的DataURL, 去掉标记信息, 后面的数据用 atob 解码, 直接装到 Uint8Array
这样就拿到了转换好的图片, 如果你喜欢可以 base64 直接上传
结合 Element UI#
如果结合 Element UI 修改 Upload 的话, before-upload
这个函数是不能返回 一个修改后的file的, 所以我们使用 http-request
拦截上传函数来做
先添加一个 :http-request="upload_file"
后~#
= = IOS 上面权限系统好麻烦, Chrome 也调用不了摄像头, 用了 vue-qrcode-reader
扫描二维码 识别率太低了, 要各种摆姿势, 微信上面基本秒扫, 有点考虑用小程序重做这部分了
参考引用#
[1]: VUE uses element UI’s upload component when ios uploads image rotation 90 degrees http://www.programmersought.com/article/6665266668/
原文地址:https://haozi.moe/2020/03/12/%E4%BF%AE%E5%A4%8DIOS%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%96%B9%E5%90%91%E9%97%AE%E9%A2%98/