EXIF метаданные изображения игнорируются браузером (React) - PullRequest
Новая
       41

EXIF метаданные изображения игнорируются браузером (React)

0 голосов
/ 20 марта 2020

У меня есть пользовательский интерфейс для загрузки изображений на веб-сайте, который я разрабатываю с использованием инфраструктуры React. js. Процесс выглядит следующим образом:

Компонент, отвечающий за загрузку изображения, содержит ввод файла типа: 

<input type={'file'}
   accept={'image/*'}
   ref={this.fileInput}
   id={"upload-file-input"}
   onChange={this.onImageSelected} />

И метод onImageSelected запускается всякий раз, когда пользователь выбирает изображение: 

onImageSelected() {
    const file = this.fileInput.current.files[0];
    this.setState({file: file});
    let reader = new FileReader();
    reader.addEventListener('load', () => this.setState({image: reader.result}));
    reader.readAsDataURL(file);
}

Изображение, которое я тестирую , имеет ориентацию EXIF ​​"Повернуть на 90 CW", как я смог определить, загрузив изображение в онлайн-просмотрщики данных EXIF. Кроме того, как и следовало ожидать, изображение не отображается перевернутым, когда я открываю его в своей системе с помощью любого средства просмотра фотографий (то есть средства просмотра фотографий учитывают данные EXIF ​​и отображают изображение так, как оно должно быть). видел). Однако, когда я пытаюсь загрузить изображение с помощью приложения React, оно кажется перевернутым на 90 градусов по сравнению с тем, что должно быть .

Я хотел бы иметь возможность доступа к данным EXIF ​​в мое приложение React, так что я могу правильно отобразить изображение в диалоге обрезки и правильно сохранить его на сервере.

Я пытался использовать пакет exif-reader npm на стороне клиента, например: 

import exif from '../../../node_modules/exif-reader';

console.log(exif(buffer));

В приведенном выше фрагменте кода buffer содержит кодировку base64 изображения как я прочитал это от элемента ввода. Кодировка выглядит так же, как когда я открываю изображение с помощью Notepad ++. Этот код вызвал исключение, говорящее о том, что буфер изображения должен начинаться с «exif» .

Примечание. По какой-то причине приложение React способно правильно отображать изображение (принимая EXIF данные на рассмотрение) на iPhone (как в Safari, так и в Google Chrome). Когда я тестировал его на своем P C (Windows, Google Chrome) или на Galaxy 10 (Samsung Inte rnet, Google Chrome), данные EXIF ​​игнорировались.

Любая помощь ценится!

...