Vue项目，上传图片时，解决图片旋转问题

问题：三星手机拍照时，正面拍照照片会旋转，左横拍才会正常。如下图所示

image

image

image

上传之后，就是这亚子，由于后台需要读取正脸照，去匹配，显然这亚子不行。

解决后：

image

**解决问题：使用exif.js来获取图像数据，然后进行处理 **

1. 安装依赖 npm install exif-js --save

2. 引用依赖 import EXIF from 'exif-js';

3. 获取图像数据 EXIF.getData();
获取某个数据方向参数 EXIF.getTag(this, 'Orientation');

代码如下

// 处理图片旋转 方法
handleImgRotate(target， listName) { 
      let canvas = document.createElement('canvas'); 
      let ctx = canvas.getContext('2d'); 
      let orientation = null; 
      let imgObj = target; 
      let _this = this;
      // 图片压缩 
      if (imgObj && imgObj.width > 1000 && imgObj.height > 1000) { 
              imgObj.width = imgObj.width / 6; 
              imgObj.height = imgObj.height / 6; 
      }
 
    EXIF.getData(imgObj, function() { 
        // 获取某个数据方向参数 
       orientation = EXIF.getTag(this, 'Orientation'); 
        // 为6的时候，图片需宽高反转
         if (orientation && orientation == 6 && imgObj.width > imgObj.height) {
             canvas.width = imgObj.height; 
             canvas.height = imgObj.width; 
         } else {
             canvas.width = imgObj.width; 
             canvas.height = imgObj.height; 
         } 
         ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height);
         if (orientation) { 
             // 为1，正常 
             switch (Number(orientation)) { 
                 case 3: // 需要180度旋转 
                      ctx.rotate(180 * Math.PI / 180); 
                      ctx.drawImage(imgObj, -imgObj.width, -imgObj.height, imgObj.width, imgObj.height); 
                  break; 

                case 6: // 需要顺时针（向左）90度旋转 
                     ctx.rotate(90 * Math.PI / 180); 
                     ctx.drawImage(imgObj, 0, 0, imgObj.width, -imgObj.height); 
                break;
                case 8: // 需要逆时针（向右）90度旋转 
                   ctx.rotate(270 * Math.PI / 180); 
                   ctx.drawImage(imgObj, -imgObj.height, 0, imgObj.height, imgObj.width); 
               break; 
               default:
                     ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height); 
                     break; 
              }
 
     } 

     _this[listName].push({ image: canvas.toDataURL('image/jpeg')});
 
}); 
return _this[listName];

遇到问题，使用的 element-ui 框架里的el-upload组件，上传成功后，无法读取上传后image的图片信息

解决问题：需要循环出所有图片，并load加载方法，获取信息

//  在el-upload中调用改变后的方法
  


imageChange(file, fileList) { 
      this.avatarList = []; // 用于图片需重新load加载
      this.avatarListBase = [];  // 改变一次时，需清空之前数据
      fileList.forEach((item) => { 
          this.avatarList.push(
            {image:     URL.createObjectURL(item.raw)}); }
         ); 
},
avatarCallback(e) {      
     let data = this.handleImgRotate(e.target);  // 调用处理旋转的方法     
     this.avatarListBase.push(data);   // 添加到一个数组中，用于接口上传参数时
}

// 上传接口时：需将base64URL转换为file
dataURLtoFile(dataurl, filename) { 
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new File([u8arr], filename, {type: mime});
 },
 addWhiteUser() {
     this.avatarListBase.forEach((item, index) => { 
         let formData = new FormData();
           let raw = this.dataURLtoFile(this.avatarListBase[index].image, 'face' + index + '.jpg'); 
          formData.append('imgs['+[index]+']', raw); });
   });
 }