解决ios下拍照自动旋转问题

 

 <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*"  onchange="getFile()"> 上传照片

<canvas id="canvas" style="height: 0px"></canvas>

需要引入EXIF.js

function getFile() {
        // alert(1111);
      let _this = this
      let img = document.getElementById('image')
      let file = document.getElementById('inputImage').files[0]
      let reader = new FileReader()
      _this.finish = 1
      EXIF.getData(file, function () {
        console.log(1111);
                let orientation = EXIF.getTag(this, 'Orientation')
                console.log(orientation);
                reader.addEventListener('load', function () {
                    console.log(1111);
                let image = new Image()
                image.src = reader.result
                sessionStorage.setItem('imgBase', reader.result);
                console.log(reader.result);
                let canvas = document.getElementById('canvas') //  处理位置不对的图片
                let ctx = canvas.getContext('2d')
                image.onload = function () {
                if (navigator.userAgent.match(/iphone|ipod|ipad|62\.0\.3202.84\sMobile\sSafari\/537\.36\sMicroMessenger|57\.0\.2987\.132\sMQQBrowser/i)) {
                        if (orientation != '' && orientation != undefined && orientation != 1) {
                          switch (orientation) {
                            case 6: // 需要顺时针（向左）90度旋转
                              canvas.width = image.height
                                  canvas.height = image.width
                                ctx.rotate(90 * Math.PI / 180)
                                    ctx.drawImage(this, 0, -image.height)
                                break
                            case 8: // 需要逆时针（向右）90度旋转
                              canvas.width = image.height
                                  canvas.height = image.width
                                ctx.rotate(270 * Math.PI / 180)
                                    ctx.drawImage(this, -image.width, 0)
                                break
                            case 3: // 需要180度旋转
                              canvas.width = image.width
                                  canvas.height = image.height
                                ctx.rotate(180 * Math.PI / 180)
                                    ctx.drawImage(this, -image.width, -image.height)
                                break
                          }
                        } else {
                          canvas.width = image.width
                        canvas.height = image.height
                          ctx.drawImage(this, 0, 0, image.width, image.height)
                        }
                    } else {
                      canvas.width = image.width
                      canvas.height = image.height
                        ctx.drawImage(this, 0, 0, image.width, image.height)
                    }
                    // Indicator.close()
                    _this.imgsrc = canvas.toDataURL()
                    _this.finish = 0
                  }
          image.onerror = function () {
            _this.finish = 0
            Toast({message: '图片上传错误，请重试', duration: 1500})
          }
              }, false)
            })
            if (file) {
                reader.readAsDataURL(file)
            } else {
                // Indicator.close()
                _this.finish = 0
            }
    }

　　

来源：oschina

链接：https://my.oschina.net/u/4293989/blog/3867545