Bagaimana untuk Mengekstrak Data Putaran JPEG EXIF ​​dalam JavaScript di Bahagian Pelanggan?

Mengakses Data Putaran JPEG EXIF ​​dalam JavaScript pada Bahagian Pelanggan

Data EXIF ​​yang dibenamkan dalam imej JPEG menyimpan maklumat berharga, termasuk putaran asal daripada foto itu. Untuk meningkatkan pengalaman pengguna, pembangun sering memerlukan akses kepada data EXIF ​​​​ini untuk pelarasan putaran automatik. Artikel ini membentangkan penyelesaian JavaScript untuk mendapatkan semula data putaran JPEG EXIF ​​pada bahagian pelanggan.

Cara Mendapatkan Data Putaran JPEG EXIF

Untuk mengakses data JPEG EXIF ​​dalam JavaScript, anda boleh menggunakan langkah-langkah berikut:

1. Baca fail JPEG: Gunakan API FileReader untuk membaca fail JPEG sebagai ArrayBuffer.
2. Parse data EXIF: Periksa ArrayBuffer untuk permulaan data EXIF, yang biasanya dikenal pasti dengan nilai pengepala 0xFFE1.
3. Cari teg orientasi: Dalam data EXIF , cari teg Orientasi (ID teg: 0x0112). Teg ini mengandungi nilai putaran sebagai kod berangka.

Kod Contoh

Berikut ialah coretan kod contoh yang melaksanakan langkah yang diterangkan di atas:

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

Coretan kod ini boleh disepadukan ke dalam aplikasi web anda untuk mendapatkan dan memproses data putaran JPEG EXIF, membolehkan anda memutar foto berdasarkan orientasi asalnya pada sisi pelanggan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekstrak Data Putaran JPEG EXIF ​​dalam JavaScript di Bahagian Pelanggan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!