JavaScript를 사용하여 JPEG 파일에서 EXIF ​​방향 데이터를 추출하는 방법은 무엇입니까?

JavaScript를 사용하여 클라이언트 측에서 JPEG EXIF ​​회전 데이터에 액세스

카메라에서 캡처하고 JPEG EXIF에 저장한 대로 원래 방향을 기준으로 사진을 회전하는 기능 데이터는 적절한 표시를 보장하는 데 필수적입니다. 이는 JavaScript와 를 사용하여 클라이언트 측에서 전적으로 달성할 수 있습니다. element.

JavaScript에서 EXIF ​​방향 데이터를 추출하는 방법

EXIF 방향 데이터에 액세스하기 위해 JavaScript는 로컬 파일 API 개체, 로컬 이미지를 읽을 수 있는 메서드를 활용할 수 있습니다. () 또는 원격 이미지()입니다. 그러한 방법 중 하나는 파일을 배열로 읽을 수 있는 FileReader 개체입니다.

다음은 FileReader를 활용하여 JPEG 파일에서 방향 태그를 추출하는 특정 함수입니다.

<code class="javascript">function getOrientation(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var view = new DataView(e.target.result);

    // Check for "SOI" ("Start of Image") marker
    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

    // Calculate offset to APP1 marker
    var length = view.byteLength, offset = 2;
    while (offset < length) {
      if (view.getUint16(offset+2, false) <= 8) return callback(-1);
      var marker = view.getUint16(offset, false);
      offset += 2;

      // Check for APP1 marker
      if (marker == 0xFFE1) {
        // Check for "Exif" signature
        if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);

        var little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        var tags = view.getUint16(offset, little);
        offset += 2;

        // Search for Orientation tag
        for (var i = 0; i < tags; i++) {
          if (view.getUint16(offset + (i * 12), little) == 0x0112) {
            return callback(view.getUint16(offset + (i * 12) + 8, little));
          }
        }
      }
      else if ((marker &amp; 0xFF00) != 0xFF00) {
        break;
      }
      else {
        offset += view.getUint16(offset, false);
      }
    }
    return callback(-1);
  };

  reader.readAsArrayBuffer(file);
}

사용 예

제공된 기능을 사용하려면 파일 입력 요소의 입력 이벤트를 활용할 수 있습니다.

<code class="javascript">var input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('orientation: ' + orientation);
  });
}

HTML

<code class="html"><input id='input' type='file' /></code>

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