JS解决了IOS中照片预览旋转90度BUG的问题

在上一篇文章【Js使用Canvas实现图像压缩功能】中，对图像进行了压缩上传，但在IOS实机测试时发现图像预览自动逆时针旋转了90度。对于这个bug，不知道是什么问题，然后我会为百度编程。通过杜娘，我们找到了相关信息，解决方案都记录在这里。其实我还是不知道这个问题的具体因素。只有IOS和部分三星手机会有这个bug。大多数安卓机器都没有这个问题。

要解决这个问题，需要引入第三方JS库：exif.js下载地址：https://github.com/exif-js/exif-js.通过exif.js，可以获取图片的元信息，包括拍照方向。

exif.js给出的照片方向属性如下：

在IOS中，通过exif.js获取拍摄图片的方向，返回值为6，即上图最左边的F。这就是我们的问题所在。因此，我们通过判断方向的值来做相应的处理。如果值为6，我们将校正图片的旋转。

具体代码如下：

//获取图片方向函数getphotoorientation(img){ varorientation；EXIF.getData(img，function(){ orient=EXIF . gettag(this，' Orientation ')；});返回东方；}接下来，我们将修改上一篇文章中的压缩函数，如下所示：

//图片压缩功能压缩(img，宽度，高度，比例){var canvas，CTX，img64，orient//获取图片方向=getphotoorientation(img)；canvas=document . create element(' canvas ')；canvas.width=宽度；canvas.height=高度；CTX=canvas . getcontext(' 2d ')；//如果图片方向等于6，旋转校正，否则不处理If(orient==6){ CTX . save()；ctx.translate(宽/2，高/2)；旋转90度。PI/180)；ctx.drawImage(img，0 -高/2，0 -宽/2，高，宽)；CTX . restore()；} else { ctx.drawImage(img，0，0，宽度，高度)；} img 64=canvas . todaytaul(' image/JPEG '，ratio)；返回img64}好了，问题解决了！

以上JS解决了IOS中照片预览旋转90度的问题，这是边肖分享的全部内容。希望能给大家一个参考，支持我们。