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

Patricia Arquette
Lepaskan: 2024-10-30 06:41:03
asal
754 orang telah melayarinya

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

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!