webview img照片旋转_前端上传图片被旋转的处理方案

需求背景

用户需要上传图片，然后前端将这张图片绘制到canvas画布上，然后生成base64展示给用户，这里需要其他操作，所以需要使用canvas，而不是直接用fileReader。

出现的问题

在电脑上，我们进行代码编写的时候，在chrome上进行调试的时候没有问题，但是一旦在手机上测试就发现图片进行了旋转，不同的拍摄角度图片旋转的角度也不一样，如横拍，竖拍，倒着拍。具体代码如下:

具体表现为，这是我们上传的图片

是正向的，但是发现展示在canvas画布中的图片为

图片在原有的基础上逆时针旋转了90°

问题原理分析

在手机中默认横排才是正确的拍照姿势，如果我们手机竖着拿然后逆时针旋转90°这才是正确的拍照姿势，这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍搜时，就会发生旋转。 这时候就需要知道用户上传的图片是什么角度拍摄的

一般来说上传的图片有这么几种情况分别旋转0°、90°、180°、270°，所以需要对各种情况进行处理

解决方案

npm上有有一个包叫exif，他可以获取到上传图片的旋转角度，具体使用方法可参考文档，下面是我们的解决方案

绘制图片到canvas
在上图中，我们了解到不同orientation旋转了不同的角度，下面就是将图片绘制到画布上 以orientation为6为例，也就是竖拍为例

x轴和y轴是canvas画布轴的方向，图片1也就是用户上传的图片要进行顺时针旋转90°到图片2图片才能正常显示，而且需要记住的是绘制图片时从图片的左上角开始绘制的，所以图片2的绘制方法如下:

首先更改canvas的宽高，因为最后生成的图片是图片2，所以需要限制他的宽高。然后需要将画布旋转90°，然后绘制坐标从(0, -height)开始，然后就绘制成功了，然后输出到页面当中就可以了，其他的旋转角度具体代码如下:

万恶的ios

发现大部分手机都正常的时候，此时万恶的苹果手机出现了问题，结论发现ios版本大于等于13.4.1的手机不需要前端对其调整图片方向，无论倒着拍，还是旋转拍，图片上传后的方向都是正确的，所以需要对ios的版本进行判断

因为ios的版本都是类似这样的version1.version2.version3所以这里没有做更多的处理，最后处理图片的逻辑为

作者：B_Cornelius
链接：https://juejin.im/post/5ecb30d7f265da76c26e5f60
来源：掘金