Реакция изображения кадрирования изображения реакции-кадрирования только в портретном режиме iPhone

Question

Я использую библиотеку act-image-crop , чтобы пользователи могли выбрать картинку и обрезать ее.

Библиотека прекрасно работает, пока вы не наберете iPhone. Съемка портретного (вертикального) изображения приводит к правильному повороту изображения при кадрировании на холсте, но при полном завершении - в неправильном направлении.

Вот код коды от самого создателя.

ВЫПУСК Ниже приведено изображение, в котором в верхней части секции обрезки изображение имеет правильную ориентацию, а выходное изображение снизу - в неправильном направлении.

Answer 1

Нужно загрузить дополнительную библиотеку:

npm i blueimp-load-image --S

Загрузить ее на свою страницу

import loadImage from "blueimp-load-image/js";

И вместо использования fileReader, использовать библиотеку так:

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      loadImage(
        e.target.files[0],
        img => {
          var base64data = img.toDataURL(`image/jpeg`);
          this.setState({ src: base64data });
        },
        { orientation: true }
      );

      // const reader = new FileReader();
      // reader.addEventListener('load', () =>
      //   this.setState({ src: reader.result })
      // );
      // reader.readAsDataURL(e.target.files[0]);
    }
  };

Вот рабочий пример в codesandbox