• 解决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
                }
        }
    

      

  • 相关阅读:
    自学android半年,已从.net转型成android程序员,分享下这个过程(转)
    深入浅出jsonp
    对程序员说点实在话(转)
    浅谈iOS学习之路(转)
    Quartz Cron表达式 在线生成器
    AutoMapper使用笔记
    毕业两年工作三年小结
    C#转C++的一点分享
    手机数据抓包以及wireshark技巧
    这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧。。。(转)
  • 原文地址:https://www.cnblogs.com/web-leader/p/9469400.html
Copyright © 2020-2023  润新知