Uploaded images in React rotating when uploading on iPhone

Question

I am uploading photos in a Next.js web app. It works as expected, but when uploading an image on an iphone the image rotates 90 degrees anti-clockwise.

Is there a way I can stop the image rotating?

Answer 1

This easiest way I found to fix this was by using the following package: https://www.npmjs.com/package/blueimp-load-image

The issue is when uploading images on an iPhone using the image type Heif (which is the default type an image is taken in), it adds exif data to the image. In order to access this exif data and reset the orientation value, you can do something like I have done below.

import loadImage from "blueimp-load-image";

   // Get the file from the input
   let file = e.target.files[0];

   // Use the package to reset the orientation data
    loadImage(
      file,
      function (img, data) {
        if (data.imageHead && data.exif) {
          // Reset Exif Orientation data:
          loadImage.writeExifData(data.imageHead, data, "Orientation", 1);
          img.toBlob(function (blob) {
            loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
              // do something with newBlob
              file = newBlob;
            });
          }, "image/jpeg");
        }
      },
      { meta: true, orientation: true, canvas: true, maxWidth: 800 }
    );