• 解决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.84sMobilesSafari/537.36sMicroMessenger|57.0.2987.132sMQQBrowser/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
                }
        }
    

      

  • 相关阅读:
    【HDOJ】4982 Goffi and Squary Partition
    【HDOJ】4983 Goffi and GCD
    【算法导论】学习笔记——第7章 快速排序
    【算法导论】学习笔记——第6章 堆排序
    【HDOJ】4956 Poor Hanamichi
    【HDOJ】2492 Ping pong
    【Linux】鸟哥的Linux私房菜基础学习篇整理(十二)
    【Linux】鸟哥的Linux私房菜基础学习篇整理(十一)
    统计硬币
    放大的X
  • 原文地址:https://www.cnblogs.com/web-leader/p/9469400.html
Copyright © 2020-2023  润新知