JavaScript: настройка ориентации изображения перед загрузкой с мобильного телефона с помощью EXIF

Question

Я пытаюсь загрузить изображение в Firestore с мобильного устройства, но ориентация изображения остается альбомной, когда она должна быть портретной.

Основной процесс:

• Загрузить изображение с файлом изображения "input"
• Получите ориентацию с помощью EXIF ​​и соответственно настройте на холст
• Загрузить новый холст в Firestore

Проблема:

При предварительном просмотре холста ориентация и размеры правильные, но после загрузки в Firestore изображение все еще остается в исходной (неправильной) ориентации.

Вопрос:

Есть ли проблема с кодом?

Я ориентируюсь только на отображение и не изменяю фактические данные EXIF? Если да, то как мне отредактировать, чтобы он загружался в правильной ориентации?

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    var image = new Image();

    reader.onload = function(e) {
      $('#editImage').attr('src', e.target.result);

      EXIF.getData(input.files[0], function() {
        // Fetch image tag
        // Create canvas
        var canvas = document.createElement("canvas");
        var img = document.createElement("IMG");
        img.setAttribute('src', e.target.result);

        // run orientation on img in canvas
        orientation(img, canvas);
      });
      image.onload = function() {
        // access image size here 
      };
    };
    reader.readAsDataURL(input.files[0]);
    console.log(reader);
  }
}

function orientation(img, canvas) {
  // Set variables
  var ctx = canvas.getContext("2d");
  var exifOrientation = '';

  // Set Width and Height
  var width = img.width;
  var height = img.height;

  var MAX_WIDTH = 600;
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }

  console.log(width);
  console.log(height);

  // Check orientation in EXIF metadatas
  EXIF.getData(img, function() {
    var allMetaData = EXIF.getAllTags(this);
    exifOrientation = allMetaData.Orientation;
    console.log('Exif orientation: ' + exifOrientation);
  });

  // set proper canvas dimensions before transform & export
  if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
    canvas.width = height;
    canvas.height = width;
  } else {
    canvas.width = width;
    canvas.height = height;
  }

  // transform context before drawing image
  switch (exifOrientation) {
    case 2:
      ctx.transform(-1, 0, 0, 1, width, 0);
      break;
    case 3:
      ctx.transform(-1, 0, 0, -1, width, height);
      break;
    case 4:
      ctx.transform(1, 0, 0, -1, 0, height);
      break;
    case 5:
      ctx.transform(0, 1, 1, 0, 0, 0);
      break;
    case 6:
      ctx.transform(0, 1, -1, 0, height, 0);
      break;
    case 7:
      ctx.transform(0, -1, -1, 0, height, width);
      break;
    case 8:
      ctx.transform(0, -1, 1, 0, 0, width);
      break;
    default:
      ctx.transform(1, 0, 0, 1, 0, 0);
  }

  // Draw img into canvas
  ctx.drawImage(img, 0, 0, width, height);
  console.log(canvas.toDataURL());
  var DataURL = canvas.toDataURL();

  UploadFile(DataURL);
}

Answer 1

Я столкнулся с той же проблемой, я действительно рад поделиться шагами, как я решил эту проблему.

Проблема:

Немногие смартфоны, особенно Samsung и iPhone, делают снимки в альбомном режиме. Но браузеры недостаточно умны, чтобы правильно отображать это изображение.

Разрешение:

Шаг 1: вы можете прочитать информацию EXIF ​​изображения и на основе данных об ориентации вы можете отобразить изображение так, как вы хотели. Для этого пригодится пакет "exif-direction-image" npm.

"exif-Ориентация-изображение" будет читать файл изображения и возвращает холст с правильно ориентированным изображением. Затем вы можете визуализировать холст на экране.

Шаг 2: Если вы хотите выгрузить правильно ориентированное изображение на сервер, то вместо рендеринга холста на шаге 1 преобразуйте холст в URL данных, а затем URL данных в файл. И используйте этот преобразованный файл для загрузки в корзину s3 или на любой сервер, который вы используете.