exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本 ）
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4 ）
问题描述：
在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现
iOS 13.4 更新后带来的问题
然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。
解决方案：
安装exif.js
1.npm install exif-js --save
2.在对应的vue模块引入：import EXIF from “exif-js”;
exif.js中 Orientation 属性说明如下：
| 旋转角度 | 参数 |
|---|---|
| 0° | 1 |
| 顺时针90° | 6 |
| 逆时针90° | 8 |
| 180° | 3 |
项目中使用：
<script>
import EXIF from "exif-js";
export default {methods: {afterRead(file) {var self = this;let Orientation = null;//去获取拍照时的信息，解决拍出来的照片旋转问题 file.file为文件对象EXIF.getData(file.file, function () { Orientation = EXIF.getTag(this, "Orientation");});var img = new Image(),width = 512, //image resize 压缩后的宽quality = 0.9, //image quality 压缩质量canvas = document.createElement("canvas"),drawer = canvas.getContext("2d");img.src = file.content;img.onload = function () {//利用canvas压缩图片canvas.width = width;canvas.height = width * (img.height / img.width);/*** 自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了* 获取ios 的系统版本号，在13.4版本之前需要旋转，之后就不需要了*/var str= navigator.userAgent.toLowerCase(); var ver=str.match(/cpu iphone os (.*?) like mac os/);// console.log("你当前的Ios系统版本为："+ver[1].replace(/_/g,"."))console.log(ver[1].replace(/_/g,".")<'13.4')if ((ver[1].replace(/_/g,".")<'13.4') && Orientation && Orientation != 1) {switch (Orientation) {case 6: // 旋转90度console.log(Orientation)drawer.rotate(Math.PI / 2);drawer.drawImage(img, 0, -canvas.height, canvas.width, canvas.height);break;case 3: // 旋转180度drawer.rotate(Math.PI);drawer.drawImage(img, -canvas.width, -canvas.height, canvas.width, canvas.height);break;case 8: // 旋转-90度drawer.rotate((3 * Math.PI) / 2);drawer.drawImage(img, -canvas.width, 0, canvas.width, canvas.height);break;}} else {drawer.drawImage(img, 0, 0, canvas.width, canvas.height);}var base64 = canvas.toDataURL("image/*", quality);var pic = base64.split(",")[1]; //图片的base64编码内容};// 此时可以自行将文件上传至服务器},
}
// 兼容性处理方法来源于：vue-cropper@0.5.5 仅供参考checkOrientationImage(img, orientation, width, height) {// 如果是 chrome内核版本在81 safari 在 605 以上不处理图片旋转// alert(navigator.userAgent)if (this.getVersion("chrome")[0] >= 81) {orientation = -1;} else {if (this.getVersion("safari")[0] >= 605) {const safariVersion = this.getVersion("version");if (safariVersion[0] > 13 && safariVersion[1] > 1) {orientation = -1;}} else {// 判断 ios 版本进行处理// 针对 ios 版本大于 13.4的系统不做图片旋转const isIos = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);if (isIos) {let version = isIos[1];version = version.split("_");if (version[0] > 13 || (version[0] >= 13 && version[1] >= 4)) {orientation = -1;}}}}// alert(`当前处理的orientation${orientation}`)let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");ctx.save();switch (orientation) {case 2:canvas.width = width;canvas.height = height;// horizontal flipctx.translate(width, 0);ctx.scale(-1, 1);break;case 3:canvas.width = width;canvas.height = height;//180 grausctx.translate(width / 2, height / 2);ctx.rotate((180 * Math.PI) / 180);ctx.translate(-width / 2, -height / 2);break;case 4:canvas.width = width;canvas.height = height;// vertical flipctx.translate(0, height);ctx.scale(1, -1);break;case 5:// vertical flip + 90 rotate rightcanvas.height = width;canvas.width = height;ctx.rotate(0.5 * Math.PI);ctx.scale(1, -1);break;case 6:canvas.width = height;canvas.height = width;//90 grausctx.translate(height / 2, width / 2);ctx.rotate((90 * Math.PI) / 180);ctx.translate(-width / 2, -height / 2);break;case 7:// horizontal flip + 90 rotate rightcanvas.height = width;canvas.width = height;ctx.rotate(0.5 * Math.PI);ctx.translate(width, -height);ctx.scale(-1, 1);break;case 8:canvas.height = width;canvas.width = height;//-90 grausctx.translate(height / 2, width / 2);ctx.rotate((-90 * Math.PI) / 180);ctx.translate(-width / 2, -height / 2);break;default:canvas.width = width;canvas.height = height;}ctx.drawImage(img, 0, 0, width, height);ctx.restore();canvas.toBlob(blob => {let data = URL.createObjectURL(blob);URL.revokeObjectURL(this.imgs);this.imgs = data;},"image/" + this.outputType,1);},转载于：https://blog.csdn.net/weixin_50535566/article/details/114927099
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本 ）相关推荐
- 三星手机拍照,上传照片或者下载导致图片旋转90°的解决办法。
项目需求. 因为项目中需要对拍照之后的图片进行上传. (这也是一个简单的问题) 但是就是三星手机(三星note3),出现拍照之后照片旋转了九十度. 然后我们上传上去,然后通过其他手机请求url再次显示 ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- android 解决小米手机上选择照片路径为null的问题
之前做了一个获取相册选择图片的功能,后来测试人员在小米的手机 测试时出现崩溃现象.自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码,解决了这个问题,这里记录一下. ...
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 参考文章: (1)微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 (2)https://www.cnblogs.com/co ...
- 怎么用计算机向手机上传照片,老司机教你怎么把手机的照片传到电脑
现在大家几乎人手一部手机,一台电脑.但是手机内存对电脑来说是九牛一毛.当我们手机里面存了大量照片又不舍得删除,但是内存又不够用时就想到把手机里的图片传到电脑上,有些人不知道操作方法,下面,小编就给大家 ...
- android小米手机上传图片,android 解决小米手机上选择照片路径为null的问题
释放双眼,带上耳机,听听看~! 之前做了一个获取相册选择图片的功能,后来测试人员在小米的手机 测试时出现崩溃现象.自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码 ...
- 报考上传照片时显示服务器错误,上传照片无法上传照片提示网络错误 – 手机爱问...
2007-12-03 为什么每次上传照片时都发生网络错 电脑速度"慢"是主要问题. 新浪系统在调整图片显示,又要把博客全部过渡到新版本,系统有些混乱,很多显示都会异常,过一段时间会 ...
- android 解决小米手机上选择照片路径为null情况
昨天测试帅哥说他手机选择图库崩溃了,这是一个上传头像的功能,相信很多应用都有这个功能,于是我就把手机拿过来打log看了下返回的路径 为null,在网上搜索了下解决方案,现在把解决方案记录下: 这是在o ...
- 教师资格证上传照片时显示内部服务器错误怎么解决
试了网上很多方式,兼容性视图也添加了,图片也压缩了30k以下了,但是多次上传之后还是显示内部服务器错误. 最后使用了电脑自带的编辑图片功能另存图片 选中原本就符合要求但是无法上传的图片,鼠标右键-编辑 ...
最新文章
- 协方差矩阵介绍及C++/OpenCV/Eigen的三种实现
- Java基础—ClassLoader的理解
- 【Linux 内核 内存管理】RCU 机制 ③ ( RCU 模式下添加链表项 list_add_rcu 函数 | RCU 模式下删除链表项 list_del_rcu 函数 )
- TensorFlow——基于Keras子类API的fashion-mnist数据集图像分类
- Windows2003ServerEnterprise+Oracle11g+VMWorkstation7.1：在虚拟机下Windows系统
- iBatis in 语句参数传入方法
- （摘要）100个伟大的商业理念：理念35：引爆流行
- 初步了解Java内部类
- gridview无法显示完整
- 使用javascript、Ajax制作前端拟态风格天气预报功能
- 开源Jamendo在线音乐播放器源码(四)
- 手机号码邮箱 验证规则（最新）
- 我所完成的探索电影数据集完成报告
- PHP制作简单图床,利用微博当图床-php语言实现
- glib linux,[转载]linux下glib.h的介绍
- 02. Excel_数据处理_基本操作(2)
- 3D角色模型欣赏：战斗类CG模型武士和风设计欣赏
- android外星人游戏,外星人全面战争
- 如何在MySQL中查找数据
- MULE DW Function 使用expression transformer解析嵌套MEL