最近我在做一个自用的 WMS 系统, 在显示上传完毕的图片的时候遇到了一个问题, 图片莫名其妙被逆时针旋转了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/