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

Accessing JPEG EXIF Rotation Data in JavaScript on the Client Side

The EXIF data embedded in JPEG images holds valuable information, including the original rotation of the photo. To enhance user experience, developers often need access to this EXIF data for automatic rotation adjustments. This article presents a JavaScript solution to retrieve JPEG EXIF rotation data on the client side.

How to Retrieve JPEG EXIF Rotation Data

To access JPEG EXIF data in JavaScript, you can employ the following steps:

1. Read the JPEG file: Use the FileReader API to read the JPEG file as an ArrayBuffer.
2. Parse the EXIF data: Examine the ArrayBuffer for the start of the EXIF data, which is typically identified by a header value of 0xFFE1.
3. Find the orientation tag: Within the EXIF data, look for the Orientation tag (tag ID: 0x0112). This tag contains the rotation value as a numerical code.

Example Code

Here's an example code snippet that implements the steps described above:

<code class="javascript">function getOrientation(file, callback) {
  // Read the JPEG file
  const reader = new FileReader();
  reader.onload = function(e) {
    const arrayBuffer = e.target.result;

    // Parse the EXIF data
    const view = new DataView(arrayBuffer);
    if (view.getUint16(0, false) != 0xFFD8) {
      return callback(-2); // Not a JPEG file
    }
    let offset = 2;
    while (offset < arrayBuffer.byteLength) {
      if (view.getUint16(offset + 2, false) <= 8) return callback(-1); // Invalid JPEG file
      const marker = view.getUint16(offset, false);
      offset += 2;
      if (marker == 0xFFE1) {
        if (view.getUint32(offset += 2, false) != 0x45786966) {
          return callback(-1); // Not an EXIF header
        }

        // Find the orientation tag
        const little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        const tags = view.getUint16(offset, little);
        offset += 2;
        for (let i = 0; i < tags; i++) {
          if (view.getUint16(offset + (i * 12), little) == 0x0112) {
            return callback(view.getUint16(offset + (i * 12) + 8, little)); // Found the orientation tag
          }
        }
      } else if ((marker &amp; 0xFF00) != 0xFF00) {
        break; // Not a valid JPEG marker
      } else {
        offset += view.getUint16(offset, false); // Skip the rest of the segment
      }
    }

    return callback(-1); // Orientation tag not found
  };
  reader.readAsArrayBuffer(file);
}

// Usage:
const input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('Orientation: ' + orientation);
  });
};</code>

This code snippet can be integrated into your web application to retrieve and process JPEG EXIF rotation data, allowing you to rotate photos based on their original orientation on the client side.

The above is the detailed content of How to Extract JPEG EXIF Rotation Data in JavaScript on the Client Side?. For more information, please follow other related articles on the PHP Chinese website!