Auto-rotate landscape_portrait images

To implement auto-rotate for landscape/portrait images, you typically rely on detecting the image’s orientation using its metadata (EXIF data) and then rotating it accordingly. Here’s how it works and how to implement it across platforms or tools:

🔍 How Auto-Rotation Works

Most modern devices (cameras, smartphones) embed EXIF metadata in image files that records the orientation of the device when the picture was taken. If an image appears rotated incorrectly, it’s usually because software isn’t reading or applying this metadata.

🛠️ Implementation Methods

1. Web Development (HTML/JavaScript using CSS/EXIF.js)

Use JavaScript to detect EXIF orientation and rotate accordingly.

Example using exif-js:

html
CopyEdit
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<input type="file" id="upload" accept="image/*" />
<img id="preview" />

<script>
  document.getElementById('upload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const img = document.getElementById('preview');
    const reader = new FileReader();
    reader.onload = function(event) {
      img.src = event.target.result;
      EXIF.getData(file, function() {
        const orientation = EXIF.getTag(this, 'Orientation');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const image = new Image();
        image.onload = function() {
          let width = image.width;
          let height = image.height;
          if (orientation > 4) {
            canvas.width = height;
            canvas.height = width;
          } else {
            canvas.width = width;
            canvas.height = height;
          }

          switch (orientation) {
            case 3: ctx.rotate(Math.PI); ctx.drawImage(image, -width, -height); break;
            case 6: ctx.rotate(0.5 * Math.PI); ctx.drawImage(image, 0, -height); break;
            case 8: ctx.rotate(-0.5 * Math.PI); ctx.drawImage(image, -width, 0); break;
            default: ctx.drawImage(image, 0, 0); break;
          }

          img.src = canvas.toDataURL();
        };
        image.src = event.target.result;
      });
    };
    reader.readAsDataURL(file);
  });
</script>

2. Python (Pillow Library)

python
CopyEdit
from PIL import Image, ExifTags

def auto_rotate_image(path):
    image = Image.open(path)
    try:
        for orientation in ExifTags.TAGS.keys():
            if ExifTags.TAGS[orientation] == 'Orientation':
                break
        exif = dict(image._getexif().items())

        if exif[orientation] == 3:
            image = image.rotate(180, expand=True)
        elif exif[orientation] == 6:
            image = image.rotate(270, expand=True)
        elif exif[orientation] == 8:
            image = image.rotate(90, expand=True)
    except (AttributeError, KeyError, IndexError):
        pass  # image has no EXIF orientation data

    return image

3. Command-Line (ImageMagick)

bash
CopyEdit
magick convert input.jpg -auto-orient output.jpg

This reads the EXIF data and rotates the image accordingly.

4. Mobile Apps

• iOS/Android apps often auto-rotate using built-in APIs.

• Use libraries like Glide (Android) or UIImageOrientation (iOS) to ensure proper rendering.

✅ Best Practices

• Always preserve original image EXIF data if needed.

• After auto-rotation, consider removing EXIF Orientation to prevent double-rotation.

• For server-side workflows (e.g., uploads), normalize orientation before saving.

This method ensures consistent display of images regardless of their source, especially useful for user-uploaded content or photo galleries.