Truy cập HTML/Javascript EXIF ​​dữ liệu trước khi tải lên tệp

Question

Tôi đang cố trích xuất EXIF ​​ dữ liệu từ hình ảnh (jpeg) đã được kéo vào trình duyệt hoặc đã được chọn qua phần tử nhập tệp html.

Tôi đã quản lý để xem trước hình ảnh trong trình duyệt bằng cách sử dụng FileReader and FileReader.readAsDataURL như được mô tả here.

và tôi đã tìm thấy EXIF library cho phép trích xuất dữ liệu EXIF ​​của hình ảnh qua javascript. Nhưng đối với tôi, nó chỉ hoạt động nếu tôi sử dụng nó với các thẻ img bình thường tải nội dung của chúng qua một URL.

Tôi cũng đã tìm thấy this question trên StackOverflow trong đó câu trả lời được chấp nhận nói rằng điều đó không thể thực hiện được.

Nhưng tôi khá chắc chắn rằng nó có thể được thực hiện vì 500px.com trích xuất dữ liệu EXIF ​​ngay sau khi tệp được thêm để tải lên và trước khi tải lên xong.

Một số ý tưởng về cách có thể trích xuất dữ liệu EXIF ​​từ hình ảnh được mã hóa base64 mà tôi nhận được từ FileReader?

Answer 1

cuối cùng tôi đã tìm thấy một giải pháp phía khách hàng cho các vấn đề:

1. đọc các tập tin bằng cách sử dụng FileReader và phương pháp .readAsBinaryString
2. Sau đó quấn rằng chuỗi nhị phân vào một đối tượng BinaryFile mà đã được bao gồm trong EXIF Library
3. Cuối cùng gọi EXIF.readFromBinaryFile(binaryFileObject);

và thực hiện nó :)

Answer 2

Hãy xem mã của FxIF firefox extension. Nó đọc dữ liệu exif chỉ sử dụng JavaScript. Để đọc nội dung tệp, bạn có thể sử dụng FileReader API trình duyệt hiện đại.

Answer 3

jQuery-fileExif thư viện javascript đọc dữ liệu hình ảnh exif trước khi tải lên.
GitHub link, ví dụ jsfiddle từ thư viện.

var someCallback = function(exifObject) { 

    $('#cameraModel').val(exifObject.Model); 
    $('#lat').val(exifObject.GPSLatitude); 
    $('#lng').val(exifObject.GPSLongitude); 
    // Uncomment the line below to examine the 
    // EXIF object in console to read other values 
    //console.log(exifObject); 

    } 

     try { 
     $('#file').change(function() { 
      $(this).fileExif(someCallback); 
     }); 
     } 
     catch (e) { 
     alert(e); 
     }