Vue项目解决苹果手机拍照上传图片翻转问题

input type=“file”方式上传

在项目中,这里用到了input type="file"方式上传图片

<input @change="upImg(6)" ref="foreheadCir" type="file" accept="image/*" mutiple="mutiple">

在项目测试中发现,使用苹果手机点击input标签直接调用相机功能上传照片(从相册选择图片上传则正常),却发现后台接收到的图片被翻转了90度,而在安卓机测试却不会,最终解决的方法是:使用npm库的exif-js插件。

解决步骤如下:

step1安装插件:

cnpm install exif-js --save

step2在当前组件引用插件:

import Vue from "vue";
import EXIF from "exif-js";
Vue.use(EXIF);    //全局申明

step3 获取change事件传递过来的图片(例如:this.$refs.foreheadCir.files[0])

     var Orientation = null;
        if (file) {
          if (navigator.userAgent.match(/Android/i)) {
            console.log("正在上传,请稍后...");
            var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
            if (!rFilter.test(file.type)) {
              //showMyTips("请选择jpeg、png格式的图片", false);
              return;
            }
            console.log("2222"+Orientation);
            if (/^image/.test(file.type)) {
              // 创建一个reader
              var reader = new FileReader();
              // 将图片将转成 base64 格式
              reader.readAsDataURL(file);
              // 读取成功后的回调
              reader.onloadend = function (e) {
                /*var obj={};
                obj["src"]=this.result;
                self.upPhoto(index,obj["src"],areaId);//传给后台*/
                var base64S = null;
                var img = new Image,
                  width = 2048, //image resize
                  quality = 0.8, //image quality
                  canvas = document.createElement("canvas"),
                  drawer = canvas.getContext("2d");
                  img.src = this.result;
                  img.onload = function() {
                    canvas.width = width;
                    canvas.height = width * (img.height / img.width);
                    drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
                    base64S = canvas.toDataURL("image/jpeg", quality);
                    console.log(img.src);
                    self.upPhoto(index,base64S,areaId);
                  }

              }
            }
          }else{
            console.log("正在上传,请稍后...");
            var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
            if (!rFilter.test(file.type)) {
              //showMyTips("请选择jpeg、png格式的图片", false);
              return;
            }
            // var URL = URL || webkitURL;
            //获取照片方向角属性,用户旋转控制
            EXIF.getData(file, function() {
              // alert(EXIF.pretty(this));
              EXIF.getAllTags(this);
              //alert(EXIF.getTag(this, 'Orientation'));
              Orientation = EXIF.getTag(this, 'Orientation');
              //return;
            });

            var oReader = new FileReader();
            oReader.onload = function(e) {
              //var blob = URL.createObjectURL(file);
              //_compress(blob, file, basePath);
              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
                if (navigator.userAgent.match(/iphone/i)) {
                  console.log('iphone');
//                  alert("苹果");
                  //alert(expectWidth + ',' + expectHeight);
                  //如果方向角不为1,都需要进行旋转 added by lzk
                  if(Orientation != "" && Orientation != 1){
//                    alert('旋转处理');
                    switch(Orientation){
                      case 6://需要顺时针(向左)90度旋转
//                      alert('需要顺时针(向左)90度旋转');
                        self.rotateImg(this,'left',canvas);
                        break;
                      case 8://需要逆时针(向右)90度旋转
//                      alert('需要顺时针(向右)90度旋转');
                        self.rotateImg(this,'right',canvas);
                        break;
                      case 3://需要180度旋转
//                      alert('需要180度旋转');
                        /*self.rotateImg(this,'right',canvas);//转两次
                        self.rotateImg(this,'right',canvas);*/
                        self.rotateImg(this,'turntwo',canvas);
                        break;
                    }
                  }

                  /*var mpImg = new MegaPixImage(image);
                   mpImg.render(canvas, {
                   maxWidth: 800,
                   maxHeight: 1200,
                   quality: 0.8,
                   orientation: 8
                   });*/
                  base64 = canvas.toDataURL("image/jpeg", 0.8);
                }/*else if (navigator.userAgent.match(/Android/i)) {// 修复android
                 //                var encoder = new JPEGEncoder();
                 //                base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
                 alert("安卓");
                 base64 = ctx.getImageData(0, 0, expectWidth, expectHeight);
                 }*/else{
                  //alert(Orientation);
//                  alert("其它");
                  if(Orientation != "" && Orientation != 1){
                    //alert('旋转处理');
                    switch(Orientation){
                      case 6://需要顺时针(向左)90度旋转
//                      alert('需要顺时针(向左)90度旋转');
                        self.rotateImg(this,'left',canvas);
                        break;
                      case 8://需要逆时针(向右)90度旋转
//                      alert('需要顺时针(向右)90度旋转');
                        self.rotateImg(this,'right',canvas);
                        break;
                      case 3://需要180度旋转
//                      alert('需要180度旋转');
                        /*self.rotateImg(this,'right',canvas);//转两次
                        self.rotateImg(this,'right',canvas);*/
                        self.rotateImg(this,'turntwo',canvas);
                        break;
                    }
                  }

                  base64 = canvas.toDataURL("image/jpeg", 0.8);
                }
                self.upPhoto(index,base64,areaId);//传给后台
//              $("#myImage").attr("src", base64);
              };
            };
            oReader.readAsDataURL(file);
          }
        }

step4通过画布,对图片进行旋转处理:

      rotateImg:function(img, direction,canvas) {
        console.log("拉拉");
        //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);
        }
        //img.setAttribute('step', step);
        /*var canvas = document.getElementById('pic_' + pid);
         if (canvas == null) {
         img.style.display = 'none';
         canvas = document.createElement('canvas');
         canvas.setAttribute('id', 'pic_' + pid);
         img.parentNode.appendChild(canvas);
         }  */
        //旋转角度以弧度值为参数
        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;
        }
      },

stpe5最后将生成的图片转换为base64格式,通过ajax请求发送給后端。

推荐阅读更多精彩内容