移动端iPhone手机上传图片旋转问题处理

1.下载依赖

cnpm install exif-js --save

2.使用Demo

<style lang="less" scoped>
  .commitPhoto {
    margin: 0 auto;
    text-align: center;
    .noshow {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      z-index: -1;
      .htmlToImage {
        background: #fff;
        width: 200%;
        height: 200%;
        display: flex;
        justify-content: center;
        align-items: center;
        .image-to-base64 {
          width: 200%;
          height: 200%;
          object-fit: cover;
        }
        .rotate1 {
          transform: rotate(0deg);
        }
        .rotate2 {
          transform: rotate(180deg);
        }
        .rotate3 {
          transform: rotate(90deg);
        }
        .rotate4 {
          transform: rotate(270deg);
        }
      }
    }
    .uploader-box {
      padding: 25px;
      .upload-title {
        font-size: 12px;
        color: #fff;
        opacity: 0.6;
      }
      .assistance {
        width: 235px;
        height: 40px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        margin: 25px auto 0;
        .assistance-icon {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 5px 0 15px;
          img {
            width: 16px;
            height: 16px;
          }
        }
        .assistance-number {
          font-size: 14px;
          line-height: 40px;
          color: #fff;
        }
        .assistance-btn {
          height: 40px;
          display: flex;
          align-items: center;
          margin-right: 12px;
        }
      }
    }
  }
</style>
<template>
  <div class="commitPhoto">
    <!-- 头像base流 -->
    <div class="noshow">
      <div class="canvasImg">
        <div class="htmlToImage"
             ref="imageWrapper">
          <img :src="nowFileContent"
               class="image-to-base64 rotate1"
               v-if="rotateState==1">
          <img :src="nowFileContent"
               class="image-to-base64 rotate2"
               v-else-if="rotateState==2">
          <img :src="nowFileContent"
               class="image-to-base64 rotate3"
               v-else-if="rotateState==3">
          <img :src="nowFileContent"
               class="image-to-base64 rotate4"
               v-else-if="rotateState==4">

        </div>
      </div>
    </div>
    <div class="uploader-box">
      <van-uploader v-model="fileList"
                    multiple
                    :max-count="3"
                    :before-read="beforeRead"
                    :after-read="afterRead"
                    :before-delete="deleteFile"
                    :max-size='10485760'
                    @oversize="overSizeToast" />
      <div class="upload-title">上传图片（最多三张）</div>
      <div class="assistance clearfix">
        <div class="assistance-icon left"><img src="../../common/image/人气@2x.png"></div>
        <div class="assistance-number left">立刻转发增加人气</div>
        <div class="assistance-btn right">
          <v-button width="100"
                    bgColor="linear-gradient(180deg,rgba(255,162,113,1) 0%,rgba(238,70,59,1) 100%)"
                    borderRadius='25px'
                    border='0px solid #fff'
                    fontSize='14px'
                    boxShadow='0px 1px 3px 0px rgba(237,237,237,0.5)'
                    height="28"
                    color='#fff'
                    @click="goToShare">转发</v-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  import Exif from 'exif-js'
  //Vuex公共状态动作
  import { mapActions } from 'vuex'
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  import { Toast } from 'vant';
  import closeLoading from '../../../mixins/closeLoading'
  export default {
    name: 'commitPhoto',
    mixins: [closeLoading],
    components: {},
    props: {},
    data() {
      return {
        rotateState: 1,
        fileList: [
          //   { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
          //   // Uploader 根据文件后缀来判断是否为图片文件
          //   // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
          //   { url: 'https://img.yzcdn.cn/vant/leaf.jpg' }
        ],
        appOpenid: this.$route.params.appOpenid,
        nowFileContent: '',
        senDateURl: '',
        lookDateURl: '',
      }
    },
    watch: {},
    computed: {},
    methods: {
      //Vuex辅助函数，将公共状态中的方法映射成当前的this方法
      ...mapActions(['SET_SHARELEADERSTATE']),
      goToShare() {
        this.SET_SHARELEADERSTATE(true);
      },
      initImgList() {
        let parame2 = {
          "functionName": "productbiz.service.puhui.financial.FinancialSummitService",
          "methodName": "getImageList",
          "data": {
            "openId": this.appOpenid
          }
        }
        this.$post(JSON.stringify(parame2)).then(result => {
          console.log('初始化图片参数', parame2)
          console.log('初始化图片结果', result)
          if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
            console.log('初始化图片成功结果', result.data.imageList)
            this.fileList = result.data.imageList;
          }
        })
      },
      // 返回布尔值
      beforeRead(file) {
        this.imgPreview(file);
        if (file.type == 'image/jpeg' || file.type == 'image/png') {
          return true;
        } else {
          Toast('请上传单张图片');
          return false;
        }
      },
      overSizeToast() {
        Toast.fail('已超过图片最大限制10M，请重新上传');
      },
      imgPreview(file) {
        let _this=this;
        let self = this;
        let Orientation;
        let getImageWidth;
        let getImageHeight;
        var getHeight=document.getElementsByClassName('noshow')[0].clientHeight;
        var getWeight=document.getElementsByClassName('noshow')[0].clientWidth;
        console.log('123456', getHeight,getWeight)
        //去获取拍照时的信息，解决拍出来的照片旋转问题
        Exif.getData(file, function () {
          Orientation = Exif.getTag(file, 'Orientation');
          if (Orientation == 1) {
            _this.rotateState = 1;
          } else if (Orientation == 3) {
            _this.rotateState = 2;
          } else if (Orientation == 6) {
            _this.rotateState = 3;
            document.getElementsByClassName('htmlToImage')[0].style.clientWidth=getWeight;
            document.getElementsByClassName('htmlToImage')[0].style.clientHeight=getHeight;
            console.log('宽度',document.getElementsByClassName('htmlToImage')[0].style.clientWidth);
            console.log('高度',document.getElementsByClassName('htmlToImage')[0].style.clientHeight);
          } else if (Orientation == 8) {
            _this.rotateState = 4;
            document.getElementsByClassName('htmlToImage')[0].style.clientWidth=getWeight;
            document.getElementsByClassName('htmlToImage')[0].style.clientHeight=getHeight;
          }
        });
      },
      afterRead(file) {
        this.nowFileContent = file.content;
        // var getHeight=document.getElementsByClassName('noshow')[0].clientHeight;
        setTimeout(() => {
          html2canvas(this.$refs.imageWrapper, {//eslint-disable-line 
            backgroundColor: null,
            y: 0,
            useCORS: true,//允许跨域（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
          }).then((canvas) => {
            this.lookDateURl = canvas.toDataURL("image/png");
            this.senDateURl = this.lookDateURl.replace('data:image/png;base64,', "");
            console.log('生成可查看图片', this.lookDateURl);
            let parames =
            {
              "moduleName": "",
              "functionName": "productbiz.service.puhui.financial.FinancialSummitService",
              "methodName": "uploadImage",
              "data": {
                file: this.senDateURl,
                openId: this.appOpenid,
                filetype: 'image/png'
              }
            }
            this.$post(JSON.stringify(parames)).then(result => {
              console.log('图片参数', parames)
              console.log('图片结果', result)
              if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
                console.log('图片上传成功结果', result)
              }
            })
          });

        }, 250);

      },
      deleteFile(file, detail) {
        console.log('删除图片', detail.index);
        console.log('删除图片列表', this.fileList);
        let parame1 =
        {
          "functionName": "productbiz.service.puhui.financial.FinancialSummitService",
          "methodName": "deleteImage",
          "data": {
            id: this.fileList[detail.index].id
          }
        }
        this.$post(JSON.stringify(parame1)).then(result => {
          console.log('删除图片参数', parame1)
          console.log('删除图片结果', result)
          if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
            console.log('删除图片成功结果', result)
          }
        })
        this.fileList.splice(detail.index, 1);

      }
    },
    created() {
      this.initImgList();
    },
    mounted() {

    }
  }
</script>