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

原因: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");
            }
        }
      });
  }
  

IOS上传竖向图片会旋转90度的解决办法_第1张图片
以下是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。

你可能感兴趣的:(前端)