> 웹 프론트엔드 > JS 튜토리얼 > 클라이언트 측 JavaScript에서 JPEG EXIF ​​회전 데이터를 추출하는 방법은 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-10-30 06:41:03
원래의
838명이 탐색했습니다.

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

클라이언트 측 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿