클라이언트 측 JavaScript에서 JPEG EXIF ​​회전 데이터를 추출하는 방법은 무엇입니까?

클라이언트 측 JavaScript에서 JPEG EXIF ​​회전 데이터에 액세스

JPEG 이미지에 포함된 EXIF ​​데이터에는 원본 회전을 포함한 중요한 정보가 포함되어 있습니다. 사진의. 사용자 경험을 향상시키기 위해 개발자는 자동 회전 조정을 위해 이 EXIF ​​데이터에 액세스해야 하는 경우가 많습니다. 이 기사에서는 클라이언트 측에서 JPEG EXIF ​​회전 데이터를 검색하는 JavaScript 솔루션을 제시합니다.

JPEG EXIF ​​회전 데이터를 검색하는 방법

JavaScript에서 JPEG EXIF ​​데이터에 액세스하려면, 다음 단계를 사용할 수 있습니다.

1. JPEG 파일 읽기: FileReader API를 사용하여 JPEG 파일을 ArrayBuffer로 읽습니다.
2. 구문 분석 EXIF 데이터: 일반적으로 헤더 값 0xFFE1로 식별되는 EXIF ​​데이터의 시작에 대해 ArrayBuffer를 검사합니다.
3. 방향 태그 찾기: EXIF ​​데이터 내에서 에서 방향 태그(태그 ID: 0x0112)를 찾으세요. 이 태그에는 회전 값이 숫자 코드로 포함되어 있습니다.

예제 코드

다음은 위에서 설명한 단계를 구현하는 예제 코드 조각입니다.

<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>

이 코드 조각을 웹 애플리케이션에 통합하여 JPEG EXIF ​​회전 데이터를 검색하고 처리할 수 있으므로 클라이언트 측에서 원래 방향을 기준으로 사진을 회전할 수 있습니다.

위 내용은 클라이언트 측 JavaScript에서 JPEG EXIF ​​회전 데이터를 추출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!