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

作者:小圆点时间:2026-10-23 01:36:26浏览:87

本文介绍如何解决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的内容即为全部分享,希望能提供有益参考,并欢迎继续支持本站。

作者最新文章