Exifを判定(iPhone画像が回転してしまう原因)

Exifを判定(iPhone画像が回転してしまう原因)

iphoneで撮影した画像をブラウザに表示すると回転してしまう現象が発生したので調査をしました。

現象

iphoneで撮影した画像をcssのbackground-imageを使って表示させる。

なぜか下記のように回転をしてしまいました。


回転してしまう原因

原因は、画像のExif情報を見て、自動で回転して正しい方向に直して表示してくれるブラウザ、画像のExif情報を見ないでそのまま表示するブラウザがあることが原因でした。

ブラウザの対応情報

  • iPhoneとiPadは、iOS13.4以降から有効(Safari、Chrome、FireFoxなどのバージョン関係なし)
  • Google Chrome、Chromiumは、バージョン81以降から有効
  • Firefoxはバージョン75以降から有効
  • Safari(macOS)はバージョン13.1以降から有効
  • Internet Exploerは無効
  • Microsoft EdgeはChromium以外のバージョンは無効

判定する関数

var result = checkExif();

document.write(result);

function checkExif(){
  var ua = window.navigator.userAgent;

  var uaStr = ua + ";";
  uaStr = uaStr.replace(' OS ', " OS/");
  uaStr = uaStr.replace(/ /g, ";");

  var browser = "";

  if (isBrowser(uaStr, "iPhone") || isBrowser(uaStr, "iPad")){
    //iPhoneとiPadは、iOS13.4以降から有効(Safari、Chrome、FireFoxのバージョン関係なし)
    version = getVersion( "OS/" );
    version = version.substring(0, 4);
    version = version.replace( '_', "." );
    version = parseFloat(version);
    if(version>=13.4){
      return true;
    }
    else{
      return false;
    }
  }
  else if (isBrowser(uaStr, "Chrome")){
    //Google Chrome、Chromiumは、バージョン81以降から有効
    version = getVersion(uaStr, "Chrome/");
    version = parseInt(version, 10);
    if(version>=81){
      return true;
    }
    else{
      return false;
    }
  }
  else if (isBrowser(uaStr, "Firefox")){
    //Firefoxはバージョン75以降から有効
    version = getVersion(uaStr, "Firefox/");
    version = parseInt(version, 10);
    if(version>=75){
      return true;
    }
    else{
      return false;
    }
  }
  else if (isBrowser(uaStr, "Safari") && isBrowser(uaStr, "Version") ){
    //Safariはバージョン13.1以降から有効
    version = getVersion( "Version/" );
    version = version.substring(0, 4);
    version = parseFloat(version);
    if(version>=13.1){
      return true;
    }
    else{
      return false;
    }
  }
  else{
    return false;
  }
}

function getVersion(uaStr, searchStr){
  startStr = uaStr.indexOf(searchStr) + searchStr.length;
  endStr   = uaStr.indexOf(";", startStr);

  var version = uaStr.substring(startStr, endStr);

  return version;
}

function isBrowser(uaStr, searchStr){
  if(uaStr.indexOf(searchStr)>=0){
    return true;
  }
  else{
    return false;
  }
}