上传图片解决ios端图片旋转90度问题

前一阵做的上传图片人脸识别的功能,测试人员告诉我说ios手机上传到后台,发现图片反转了90度,以前听说过这个问题,现在遇到了。为了能尽快解决这个问题(偷懒),百度了一下,雾草,坑的不要不要的,在此呼吁一下,开发者别把半吊子代码发到网上,很容易误导人的有木有。
废话不多说=>

//此处省略HTML
      var Orientation = null;
      var canvasHead = '';
      $('#fileBtn').on('change',function(){
          var files = this.files[0];
          var reader = new FileReader();
          if(typeof FileReader == 'undefined'){
              require('module/common/dialog').showToast('抱歉,您手机暂不支持');
              return;
          }else{
              reader.readAsDataURL(files);
          }
          reader.onloadstart = function(){
              require('module/common/dialog').showLoading('正在读取');
          };
          reader.onabort = function(){
              require('module/common/dialog').hideLoading();
              require('module/common/dialog').showToast('读取中断,请重试');
              return false;
          };
          reader.onerror = function(){
              require('module/common/dialog').hideLoading();
              require('module/common/dialog').showToast('读取发生错误,请重试');
              return false;
          };
          reader.onload = function(){
              require('module/common/dialog').hideLoading();
              require('module/common/dialog').showLoading('读取完成,玩命加载中');
              if(reader.readyState == 2){
                  var fileStr = reader.result;
                  var image = new Image();
                  image.src = fileStr;
                  image.onload = function(){
                      $('#preHead').addClass('preHead');
                      var preHead_canvas = document.getElementById('preHead');
                      var preHead_ctx = preHead_canvas.getContext('2d');
                      $('.fileBtn').addClass('hide');
                      //获取Orientation
                      EXIF.getData(image, function() {
                          Orientation = EXIF.getTag(image, 'Orientation');
                      });
                      //如果没有Orientation 则为Android
                      if(!Orientation){
                          preHead_canvas.width = image.width;
                          preHead_canvas.height = image.height;
                          preHead_ctx.drawImage(image, 0, 0, image.width, image.height);
                      }
                      //如果有Orientation 则为IOS
                      else{
                          switch (Orientation) {
                              case 1:
                                  preHead_canvas.width = image.width;
                                  preHead_canvas.height = image.height;
                                  preHead_ctx.drawImage(image, 0, 0, image.width, image.height);
                                  break;
                              case 3:
                                  preHead_canvas.width = image.width;
                                  preHead_canvas.height = image.height;
                                  preHead_ctx.rotate(Math.PI);
                                  preHead_ctx.drawImage(image, -image.width, -image.height, image.width, image.height);
                                  break;
                              case 6:
                                  preHead_canvas.width = image.height;
                                  preHead_canvas.height = image.width;
                                  preHead_ctx.rotate(Math.PI / 2);
                                  preHead_ctx.drawImage(image, 0, -image.height, image.width, image.height);
                                  break;
                              case 8:
                                  preHead_canvas.width = image.height;
                                  preHead_canvas.height = image.width;
                                  preHead_ctx.rotate(3 * Math.PI / 2);
                                  preHead_ctx.drawImage(image, -image.width, 0, image.width, image.height);
                                  break;
                          }
                      }
                      require('module/common/dialog').hideLoading();
                      canvasHead = preHead_canvas.toDataURL();
                      $('.cameraHead').attr('src',canvasHead);
                      $('#preHead').removeClass('hide');
                  };
              }
          }
      });

代码比较简单,重点是根据Orientation的值来编写逻辑。

你可能感兴趣的:(上传图片解决ios端图片旋转90度问题)