iOS手机竖着拍的照片被旋转了90°的原因以及解决方案

});

获取拍照方向的结果为1-8的数字：

注意：对于上面的八种方向中，加了*的并不常见，因为它们代表的是镜像方向，如果不做任何的处理，不管相机以任何角度拍摄，都无法出现镜像的情况。

这个表格代表什么意义？我们来看第一行，值为1时，右边两列的值分别为：Row #0 is Top，Column #0 is Left side，其实很好理解，它表示照片的第一行位于顶端，而第一列位于左侧，那么这张照片自然就是以正常角度拍摄的。

而这8种结果，就是第一行与第一列所在的位置的8种组合。

测试发现

（1）iOS手机横着拍的照片，照片方向显示正常。

（2） iOS手机竖着拍的照片，照片旋转了90度

测试发现照片Orientaion信息为：1、3、6、8四种状态。

我们在前端对图片进行像素处理或者drawInRect等操作之后，照片的Orientaion信息，即为拍照方向信息被删除了，所以iOS手机竖着拍的照片又回到了横着的状态，看起来也就是逆时针旋转了90°！

那么如何纠正这个旋转角度呢？

其实思路也很简单：在处理图片之前，先读取并保存图片的拍照方向信息，然后在处理图片之后，再根据拍照方向，对图片进行相应的调整，lrz.js 中的代码如下：

其中，translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。

switch (orientation) {

case 3:

context.rotate(180 * Math.PI / 180);

context.drawImage(that, -targetWidth, -targetHeight, targetWidth, targetHeight);

break;

case 6:

context.rotate(90 * Math.PI / 180);

context.drawImage(that, 0, -targetWidth, targetHeight, targetWidth);

break;

case 8:

context.rotate(270 * Math.PI / 180);

context.drawImage(that, -targetHeight, 0, targetHeight, targetWidth);

break;

case 2:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.drawImage(that, 0, 0, targetWidth, targetHeight);

break;

case 4:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.rotate(180 * Math.PI / 180);

context.drawImage(that, -targetWidth, -targetHeight, targetWidth, targetHeight);

break;

case 5:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.rotate(90 * Math.PI / 180);

context.drawImage(that, 0, -targetWidth, targetHeight, targetWidth);

break;

case 7:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.rotate(270 * Math.PI / 180);

context.drawImage(that, -targetHeight, 0, targetHeight, targetWidth);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！