get-orientation.js

/**
 * 画像の回転を取得する
 * @returns {number} 回転を表す数字。正しく表示するために数字に応じて以下の処理をする:
 *   1: 何もしない
 *   2: 左右反転
 *   3: 180度回転
 *   4: 180度回転し、左右反転
 *   5: 時計回りに90度回転し、左右反転
 *   6: 時計回りに90度回転
 *   7: 時計回りに270度回転し、左右反転
 *   8: 時計回りに270度回転
 */
function getOrientation(buffer) {
  const dataView = new DataView(buffer)
  const hasExif = dataView.getUint16(2) === 0xffe1
  if (!hasExif) {
    return 1
  }
  const exifStart = 12
  const le = dataView.getUint8(exifStart) === 0x49 // Little Endian?
  const ifdStart = exifStart + dataView.getUint32(exifStart + 4, le)
  const count = dataView.getUint16(ifdStart, le)
  for (let i = 0; i < count; i += 1) {
    const offset = ifdStart + 2 + i * 12
    const tag = dataView.getUint16(offset)
    if (tag === 0x112 /* Orientation */) {
      return dataView.getUint16(offset + 8, le)
    }
  }
  return 1
}

function showImage(url, orientation, target) {
  const transform = []
  if ([2, 4, 5, 7].indexOf(orientation) >= 0) transform.push('scaleX(-1)')
  if (orientation === 3 || orientation === 4) transform.push('rotate(180deg)')
  if (orientation === 5 || orientation === 6) transform.push('rotate(90deg)')
  if (orientation === 7 || orientation === 8) transform.push('rotate(270deg)')
  target.style.transform = transform.join(' ')
  target.style.backgroundImage = `url(${url})`
}