ios上傳圖片顯示方向錯誤問題

IOS 上傳圖片方向顯示錯誤問題

問題描述

在使用蘋果手機上傳圖片的時候，發現傳完的圖片顯示出來方向是錯誤的，豎着的圖片會變成橫着顯示(少部分安卓手機也存在這個問題)

產生緣由

ios 相機加入了方向傳感器，它能夠記錄拍攝時的方向，而且記錄在 exif 當中，因此這個時候豎拍的照片顯示出來就會就會‘橫’着了

解決辦法

1. 獲取圖片的 Orientation 信息，也就是拍攝方向
2. 繪製一個 canvas, 將該圖片繪製上去，而後修正顯示方向
3. 將 canvas 轉化成咱們須要的格式

具體操做：

const reader = new FileReader();

reader.onload = function() {
  const result = this.result;
  const photoImg = new Image();

  photoImg.src = result;

  photoImg.onload = function() {
    // 生成canvas
    const canvas = document.createElement('canvas');
    const width = photoImg.width;
    const height = photoImg.height;

    canvas.height = width;
    canvas.width = height;
    const ctx = canvas.getContext('2d');
    EXIF.getData(photoImg, function() {
      // 獲取 Orientation 信息
      const Orientation = EXIF.getTag(this, 'Orientation');
      // 根據 Orientation 信息修正方向
      switch (Orientation) {
      case 6:
        ctx.rotate(Math.PI / 2);
        ctx.translate(0, -height);
        break;
      case 3:
        ctx.rotate(Math.PI);
        ctx.translate(-width, -height);
        break;
      case 8:
        ctx.rotate(-Math.PI / 2);
        ctx.translate(-height, 0);
        break;
      default:
        break;
      }
      // 將方向錯誤的圖片繪製到 canvas 上
      ctx.drawImage(photoImg, 0, 0);
      // 將方向修正後的 canvas 裝化成 base64 編碼
      const newImg = canvas.toDataURL('image/jpeg');

      message.hide();
      resolve(newImg);
    });
  };
};
reader.readAsDataURL(photo);

Orientation 參數對照

資料

exif 文檔