[SOLVED] iOS rotate photo issue

iOS rotate photo issue

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.

Solution

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 }
)