IOS上传图片方向问题
在显示上传完毕的图片的时候遇到了一个问题, 图片莫名其妙被逆时针旋转了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/
IOS上传图片方向问题的更多相关文章
- ios上传图片显示方向错误问题
IOS 上传图片方向显示错误问题 问题描述 在使用苹果手机上传图片的时候,发现传完的图片显示出来方向是错误的,竖着的图片会变成横着显示(少部分安卓手机也存在这个问题) 产生原因 ios 相机加入了方向 ...
- IOS上传图片方法类
IOS上传图片方法类 iPhone开发中遇到上传图片问题,找到多资料,最终封装了一个类,请大家指点,代码如下 // // RequestPostUploadHelper.h // demodes ...
- IOS上传图片
//原文地址http://www.cnblogs.com/skyblue/archive/2013/05/08/3067108.html,因为以后要用到,搬来存下// // RequestPostUp ...
- iOS上传图片详解
iphone中图像通常存储在4个地方[相册.应用程序包.沙盒.Internet],通过这4个源,我们就可以存取应用图片. 相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过 ...
- iOS 屏幕方向
参考文章:http://www.tuicool.com/articles/e2q6zi 一般的应用,只会支持竖屏正方向一个方向,支持多个屏幕方向的应用还是比较少的. 当时也没搞明白,所以直接就设置了正 ...
- iOS上传图片和视频(base64和file)
前言:iOS开发中经常会使用到图片和视频上传及保存到相册,下面我讲介绍视频图片的两种上传服务器的方法.以阿里云的OSS服务器为例. 友情提示:上传图片方法在APP中使用很广泛,最好单独写一个图片上传的 ...
- 微信网页IOS上传图片旋转解决方案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- vue iOS上传图片file 出错
前言 用vue 移动端上传图片在低版本的 ios 手机上 图片转换base64 在转换file 文件类型 会报错 并且报错 “Script Error ” 查阅了github 和一些文档发现 可以吧 ...
随机推荐
- junit基本介绍视频笔记1
程序员每天工作的基本流程: 1.从svn检出代码: 2.运行单元测试,测试无误,进入下一步: 3.开始一天的代码编写工作: 4.代码提交到服务器之前进行单元测试: 5.单元测试通过提交到svn服务器. ...
- 【服务器】CentOs7系统使用宝塔面板搭建网站,有FTP配置(保姆式教程)
内容繁多,请耐心跟着流程走,在过程中遇到问题请在下面留言(我只是小白,请专业人士喷轻点). 这次用thinkphp5.1做演示,单纯的做演示,我打算下一篇文章用typecho(博客框架)演示. 前言 ...
- 暑假集训Day 4 P4163 [SCOI2007]排列 (状压dp)
状压dp (看到s的长度不超过10就很容易想到是状压dp了 但是这个题的状态转移方程比较特殊) 题目大意 给一个数字串 s 和正整数 d, 统计 s 有多少种不同的排列能被 d 整除(可以有前导 0) ...
- Kubernetes 中 搭建 EFK 日志搜索中心
简介 Elastic 官方已经发布了Elasticsearch Operator ,简化了 elasticsearch 以及 kibana的部署与升级,结合 fluentd-kubernetes-da ...
- 代码块&&API(object、String、StringBuffer、StringBuilder)
day 07 代码块 局部代码块 定义在方法中,用户划分区域的 构造代码块 和成员方法并列,用{}包裹 每次创建对象的时候都会执行,优先于构造方法 静态代码块 构造代码块前面用static声明 在同类 ...
- jQuery学习笔记(1)
什么是jQuery? jQuery是一个js库 jQuery的版本? jQuery1.x jQuery2.x(不支持IE6,7,8) jQuery作用? 简化js编写 将页面与js分离 常见的js库? ...
- CentOS 的数字命令级别
1 user commands 2 system calls 3 library functions 4 special files 5 file formats 6 ...
- Java 内存回收机制
当执行构造方法生成一个对象时,需要占用各种系统资源.当生成的对象不再使用时,就需要返回给操作系统,以免资源的泄露.在各种系统资源中,最常使用的就是内存.Java运行时系统通过垃圾收集周期性地释放无用对 ...
- 简易的java爬虫项目
简易的java爬虫项目 本项目仅供java新手学习交流,由于本人也是一名java初学者,所以项目中也有很多不规范的地方,希望各位高手不吝赐教,在评论区指出我的不足,我会虚心学习: 成果预览: 在开始讲 ...
- Spring笔记(3) - debug源码AOP原理解析
案例 @EnableAspectJAutoProxy//开启基于注解的aop模式 @Configuration public class AOPConfig { //业务逻辑类加入容器中 @Bean ...