美文网首页
上传图片解决ios端图片旋转90度问题

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

作者: MrOldK | 来源:发表于2018-04-24 13:11 被阅读381次

    前一阵做的上传图片人脸识别的功能,测试人员告诉我说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度问题

          本文链接:https://www.haomeiwen.com/subject/fqxikftx.html