码迷,mamicode.com
首页 > 移动开发 > 详细

修正ios h5上传图时的图片方向问题

时间:2016-05-13 11:21:17      阅读:581      评论:0      收藏:0      [点我收藏+]

标签:

 .ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致 
为了用户体验,需要把图片矫正成正常的图片。
需要用到一个 exif 插件 地址 https://github.com/exif-js/exif-js/
代码
function check_file(files){
         //校验收集表单数据
//          var formdata = new FormData(); 
         if(!files[0] || !/image\/\w+/.test(files[0].type)){
             
             $.hidePreloader();
                $(.li_imgs).children(.imgs).last().children().first().removeAttr(disabled);
                _deny_request = false;
                return;
             }
         
//          formdata.append("imgFile0", files[0]); 
         
         //处理IOS 拍照方向
          EXIF.getData(files[0],function(){
              Orientation = EXIF.getTag(this,Orientation);
          });
          var reader = new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onload = function(e) {  
            getImgData(e); 
          }
          return;
}

//e 图片的base64
function getImgData(e){
     var image = new Image();  
image.src = e.target.result;  
image.onload = function() {  
    var expectWidth = this.naturalWidth;  
    var expectHeight = this.naturalHeight;  
      
    if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
        expectWidth = 800;  
        expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
    } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
        expectHeight = 1200;  
        expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
    }  
    var canvas = document.createElement("canvas");  
    var ctx = canvas.getContext("2d");  
    canvas.width = expectWidth;  
    canvas.height = expectHeight;  
    ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
    var base64 = null;  
            //修复ios  
            switch(Orientation){  
                case 6://需要顺时针(向左)90度旋转  
                    rotateImg(this,left,canvas);  
                    break;  
                case 8://需要逆时针(向右)90度旋转  
                    rotateImg(this,right,canvas);  
                    break;  
                case 3://需要180度旋转  
                    rotateImg(this,right,canvas);//转两次  
                    rotateImg(this,right,canvas);  
                    break;  
            }         
        base64 = canvas.toDataURL("image/jpeg", 0.7).substring(22);//这里处理一下base64编码头,以便php的 base64_decode可以解析,压缩一下图片,否则会413错误
        displayImg(base64);
    }
}


//对图片旋转处理   
function rotateImg(img, direction,canvas) {    
        //alert(img);  
        //最小与最大旋转方向,图片旋转4次后回到原方向    
        var min_step = 0;    
        var max_step = 3;    
        //var img = document.getElementById(pid);    
        if (img == null)return;    
        //img的高度和宽度不能在img元素隐藏后获取,否则会出错    
        var height = img.height;    
        var width = img.width;    
        //var step = img.getAttribute(‘step‘);    
        var step = 2;    
        if (step == null) {    
            step = min_step;    
        }    
        if (direction == right) {    
            step++;    
            //旋转到原位置,即超过最大值    
            step > max_step && (step = min_step);    
        } else {    
            step--;    
            step < min_step && (step = max_step);    
        }    
        //旋转角度以弧度值为参数    
        var degree = step * 90 * Math.PI / 180;    
        var ctx = canvas.getContext(2d);    
        switch (step) {    
            case 0:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.drawImage(img, 0, 0);    
                break;    
            case 1:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, 0, -height);    
                break;    
            case 2:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, -height);    
                break;    
            case 3:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, 0);    
                break;    
        }    
}  


/**
 * android / ios 图片上传
 */
function displayImg(imgBinaryContentbase64){
   remove_file_input($(.li_imgs).children(.imgs).last().children().first()); //删除旧的file域
   $.showPreloader(_up_img_msg);
  var data = {};
  if(_IsIosDev){
      data[ios] = imgBinaryContentbase64;
      }else{
          data[content] = imgBinaryContentbase64;
          }
  
  $.ajax({
      type:post,
      url:?c=bzymgr/washcar&a=uploadAndroidImg&openid=<?php echo $this->openid;?>,
      data:data,
      dataType: "json",
      async: true,  
      success:function(res){
          if(res==0){
              public_toast(上传失败,请稍后重试,1000);
              return;
              }
          var html = ‘‘;
          for(var i in res){
              html += <div class="imgs">\
                           <img src="‘+res[i]+‘" class="thumb_img"/>                           <b class="img_cancel" onclick="remove_img(this)">X</b>                    </div>;
              //存储到localStorage
              add_imgs_LocalStorage(res[i]);
              }
          //插入dom
          $(.li_imgs).children(.imgs).last().before(html);
          setTimeout(function(){
                  $.hidePreloader();
                  _deny_request = false;
                  },1000);
      },  
      error:function(){
          public_toast(服务器离家出走了,请稍后重试,2000);
          }, 
  });
}

 

修正ios h5上传图时的图片方向问题

标签:

原文地址:http://www.cnblogs.com/onephp/p/5486837.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!