解决上传图片旋转的问题

iphone拍照的照片会带有exif信息, 原图上传的时候web端显示会发生旋转, 解决方案是先引入exif.js获取这个旋转值.

let Orientation = null;
EXIF.getData(file, function () {
  EXIF.getAllTags(this);
  Orientation = EXIF.getTag(this, 'Orientation');
});

然后重新绘图

let p = new Promise((resolve, reject)=>{
  let canvas = document.createElement('canvas')
  loadFile(file).then((src)=>{
  loadImg(src).then((img)=>{
    let width = img.naturalWidth;
    let height = img.naturalHeight;
    if(width > this.limitLength && width >= height) {
    height = height * this.limitLength / width;
      width = this.limitLength;
    }
    if(height > this.limitLength && height >= width) {
      width = width * this.limitLength / height;
      height = this.limitLength;
    }
    let degree = 90 * Math.PI / 180;
    let ctx = canvas.getContext('2d');
    if (Orientation) {
      switch (Orientation) {
        case 1://不旋转
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
          break;
        case 6://需要顺时针（向左）90度旋转
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, 0, -height, width, height);
          break;
       case 8://需要逆时针（向右）90度旋转
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree*3);
          ctx.drawImage(img, -height, 0, height, width);
          break;
       case 3://需要180度旋转
          canvas.width = width;
          canvas.height = height;
          ctx.rotate(degree*2);
          ctx.drawImage(img, -width, -height, width, height);
          break;
      default:
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
          break;
      }
    } else {
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
    }
    canvas.toBlob((blob)=>{
        resolve(blob) //resolve出去确保画图完成
      }, 'image/jpeg');
    })
  })
})

下面是用到的方法

 loadFile = function(file){
    let oReader = new FileReader();
    oReader.readAsDataURL(file);
    return new Promise((resolve,reject)=>{
        oReader.onload = (e)=> {
            resolve(e.target.result)
        }
        oReader.onerror=(err)=>{
            reject(err)
        }
    })
}
loadImg = function(src){
    let img = new Image();
    img.setAttribute('crossOrigin','anonymous');
    img.src = src;
    return new Promise((resolve,reject)=>{
        img.onload =()=>{
            resolve(img);
        }
        img.onerror=(err)=>{
            reject(err);
        }
    });
}

2018-06-13更新: 漏掉了Orientation==1的情况, 应该是不旋转
2018-08-15更新: 有几个旋转有问题, 已更新