本文介绍如何解决iOS真机拍照后图片预览逆时针旋转90度的Bug。通过引入exif.js库获取图片EXIF方向标签，判断Orientation值为6时，利用Canvas进行旋转矫正处理。结合图片压缩函数，实现上传前自动修正方向，确保安卓与iOS设备显示一致。
问题背景与现象
在前文提到的利用Canvas进行图片压缩上传的案例中，进行iOS真机测试时发现，预览的图片会自动逆时针旋转90度。起初并不清楚该Bug的具体成因，经过查阅相关资料后，将解决方法整理如下。该问题主要出现在iOS及部分三星手机上，绝大多数安卓设备并无此现象。
解决方案与工具引入
解决此问题需引入第三方JS库：exif.js，下载地址为https://github.com/exif-js/exif-js。利用exif.js可以获取图片的元信息，其中包含照片的拍摄方向数据。
exif.js提供的照片方向属性如下图所示：
方向判断与矫正逻辑
在iOS系统中，通过exif.js获取拍照图片的方向，返回值通常为6，对应上图最左侧的F情况。这正是导致Bug的原因。因此，我们需要根据方向值进行相应处理：若值为6，则对图片执行旋转矫正操作。
具体实现代码如下：
//获取图片方向
function getPhotoOrientation(img) {
var orient;
EXIF.getData(img, function () {
orient = EXIF.getTag(this, 'Orientation');
});
return orient;
}代码实现细节
随后，将前文提到的压缩函数修改为以下形式：
//图片压缩
function compress(img, width, height, ratio) {
var canvas, ctx, img64, orient;
//获取图片方向
orient = getPhotoOrientation(img);
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
//如果图片方向等于6 ，则旋转矫正，反之则不做处理
if (orient == 6) {
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
ctx.restore();
} else {
ctx.drawImage(img, 0, 0, width, height);
}
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64;
}至此，问题得以解决。
以上关于JS解决iOS中拍照图片预览旋转90度Bug的内容即为全部分享，希望能提供有益参考，并欢迎继续支持本站。