How to Access JPEG EXIF Rotation Data in JavaScript on the Client-Side?

Sometimes, we want to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

In this article, we’ll look at how to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

Access JPEG EXIF Rotation Data in JavaScript on the Client-Side with JavaScript-Load-Image

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.

To use it, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script>

<input type='file'>

We add the load-image.all.min.js script to add the metadata parser with the core library.

Then to parse the EXIF metadata, we write:

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = [...e.target.files]
  loadImage.parseMetaData(
    file,
    (data) => {
      console.log(data.exif)
    }, {
      includeExifTags: {
        0x0112: true,
        ifd1: {
          0x0201: true,
          0x0202: true
        },
        0x8769: {
          0x9000: true
        }
      }
    }
  )
})

We get the file from the input and assign it to the file object.

Then we call the loadImage.parseMetaData to parse the EXIF metadata from the image.

Next, we pass in the file object and the callback with the data which has the data.exif property which has the EXIF metadata in an object.

The 3rd argument is an object with the EXIF tags we want to get.

They include 0x0112 for orientation, 0x0201 for thumbnail data offset, 0x0202 for data length, 0x8769 for EXIF pointer, and 0x9000 for EXIF version.

Now when we select an image file, we should see the EXIF data loaded.

Conclusion

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.