问题

项目中发现有些图片在iso端展示是自动旋转了180°。

原因

图片携带有拍照时的方向的属性。比如用手机横过来拍照，这个照片就会记录方向是横着的。虽然安卓和window正常，但是ios会读到这个img的方向的属性。然后按照属性旋转。

解决办法

npm install exif-js --save

import EXIF from "exif-js"
img.onload = () => {
        // 处理图片在ios下自动旋转问题
        let imgStyle = 'rotate(0deg)'
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isiOS) {
          EXIF.getData(img, function() {
            EXIF.getAllTags(this);
            let Orientation = 1;
            Orientation = EXIF.getTag(this, 'Orientation');
            switch (Orientation) {
              case 6: //需要顺时针（向左）90度旋转
                imgStyle = 'rotate(-90deg)';
                break;
              case 8: //需要逆时针（向右）90度旋转
                imgStyle = 'rotate(90deg)';
                break;
              case 3: //需要180度旋转
                imgStyle = 'rotate(180deg)';
                break;
            }
          });
        }
      }

在图片load完后，执行exif方法，获取img自带的反向属性。