IOS上传竖向图片会旋转90度的解决办法

最新推荐文章于 2023-03-03 15:30:07 发布

gaiery

最新推荐文章于 2023-03-03 15:30:07 发布

阅读量4.4k

点赞数 1

分类专栏：前端文章标签：移动端 IOS 旋转90

本文链接：https://blog.csdn.net/gaiery/article/details/82753772

版权

前端专栏收录该内容

30 篇文章 2 订阅

订阅专栏

原因：iOS手机竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向；
解决：读取图片的拍照方向信息，纠正至正确的方向。
参考地址：http://code.ciaoca.com/javascript/exif-js/
获取图片Orientation参数，=6是正常竖向拍摄，=3是横线拍摄-180度，=8是竖向-180度拍摄。

以下为获取方法，在图片上传成功的回调函数中调用：

//解决IOS上传竖向照片会旋转90度的问题
  rotate(){
      let Orientation = null;
      let _filelist = $("#showImg")[0].files[0];
      $(".weui-uploader__file").removeClass("rotate-90");
      $(".weui-uploader__file").removeClass("rotate-180");
      $(".weui-uploader__file").removeClass("rotate-90-back");
      //获取图片Orientation参数
      EXIF.getData(_filelist, function()  {
          Orientation = EXIF.getTag(this, 'Orientation');
          if(Orientation){
            switch(Orientation){
                case 6:     // 正常竖拍
                    $(".weui-uploader__file").addClass("rotate-90");
                    break;
                case 3:     // 横线拍-180
                    $(".weui-uploader__file").addClass("rotate-180");
                    break;
                case 8:     // 竖向拍-180
                    $(".weui-uploader__file").addClass("rotate-90-back");
                    break;
                default:
                    $(".weui-uploader__file").removeClass("rotate-90");
                    $(".weui-uploader__file").removeClass("rotate-180");
                    $(".weui-uploader__file").removeClass("rotate-90-back");
            }
        }
      });
  }

在这里插入图片描述
以下是css样式：

.rotate-90{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate-180{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
.rotate-90-back{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

注意*：获取图片Orientation参数时的方法，用function 和箭头函数的this指向不同，应该用function，this指向调用该函数的对象。而箭头函数指向window。