1

I have setup a PWA with React (CRA). When I upload a picture in iOS and crop it using react-image-crop it displays the cropped image sideways, it works well on all other devices (desktop, android). I saw some similar issues open, but I can't really understand what's causing that and how to fix it.

Any help/guidance would be appreciated.

A.Blanc
  • 403
  • 1
  • 6
  • 15
  • Is the image a PNG by any chance? I remember having a similar issue myself, and this was the solution: https://stackoverflow.com/questions/10850184/ios-image-get-rotated-90-degree-after-saved-as-png-representation-data Sorry, this is a UIKit answer, not React. But it might still help. – DanubePM May 03 '20 at 23:23
  • No, and I don't think the extension has a role in this :/. Edit: this happens only after cropping. – A.Blanc May 04 '20 at 08:23

2 Answers2

2

I finally fixed this. I used blueimp-load-image to set the orientation to 1 prior to getting the URL of the blob, so that it wouldn't rotate the picture based on the orientation value. The issue was that, it was being saved rotated on my server, and it needed to override that.

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    if (data.imageHead) {
      img.toBlob(function (blob) {
        loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
          // do something with the new Blob object
        })
      }, 'image/jpeg')
    }
  },
  { meta: true, canvas: true, maxWidth: 800 }
)
A.Blanc
  • 403
  • 1
  • 6
  • 15
1

Rotation can be induced by exif data of the image. If it gets lost during rotation, iOS will display the image "wrong". Use an online exif viewer, rotate and save the image, and check if the exif data remains.

Kastor
  • 478
  • 5
  • 12
  • Using and exif viewer I got orientation: Rotate 180. If I rotated and saved the image the orientation tag was no longer present and the image uploaded as expected. Do you have any ideas which would be the best way to handle this? – A.Blanc May 04 '20 at 08:48
  • Sadly I am not too familiar with the react ecosystem. So I can't name libs. But you need a n exif lib. Then you read out the orientation, process the image, and write it back. – Kastor May 04 '20 at 10:42
  • I handled it and it fixed some issues. However this is still happening with live images, which don't seem to have an orientation tag – A.Blanc May 05 '20 at 10:13