移动端上传图片旋转问题

[RicoLiu]

移动端设备调用摄像头拍照上传图片，会出现图片旋转90度的问题，比如：iPhone竖屏拍照会出现这个问题，横屏拍照正常。原因是：Orientation 的值不是1。iPhone 前后置摄像头进行旋转各种角度拍摄的结果都只在 [1, 6, 3, 8] 之间。

为了解决此问题，需要获取到图片 Exif 信息中的 Orientation 数据：

github: https://github.com/exif-js/exif-js

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

然后，根据 Orientation 去进行图片旋转：

if(Orientation && Orientation != 1){
  switch(Orientation){
   case 6:     // 旋转90度
      canvas.width = imgHeight;    
      canvas.height = imgWidth;    
      ctx.rotate(Math.PI / 2);
      // (0,-imgHeight) 从旋转原理图那里获得的起始点
      ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
      break;
   case 3:     // 旋转180度
      ctx.rotate(Math.PI);    
      ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
      break;
   case 8:     // 旋转-90度
      canvas.width = imgHeight;    
      canvas.height = imgWidth;    
      ctx.rotate(3 * Math.PI / 2);    
      ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
      break;
   default:
      ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
      break;
  }
}else{
    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
}

参考：移动端图片上传旋转、压缩的解决方案