How to access JPEG EXIF rotation data in JavaScript on the client side?

Sometimes, we want to access JPEG EXIF rotation data in JavaScript on the client side.

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

How to access JPEG EXIF rotation data in JavaScript on the client side?

To access JPEG EXIF rotation data in JavaScript on the client side, we can use the exif-js library.

To add it, we run

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

Then we use it by writing

const img1 = document.getElementById("img1");
EXIF.getData(img1, function () {
  const make = EXIF.getTag(this, "Make");
  const model = EXIF.getTag(this, "Model");
  const makeAndModel = document.getElementById("makeAndModel");
  makeAndModel.innerHTML = `${make} ${model}`;
});

to get the img element with getElementById.

Then we call getData with the img element and a callback that gets the exif data.

We call EXIF.getTag to get the exif tag we’rew looking for.

Conclusion

To access JPEG EXIF rotation data in JavaScript on the client side, we can use the exif-js library.