Javascript Girl
  1. Javascript Girl
  3. Récupérer les métadonnées de l'image EXIF ​​à partir de l'image chargée HTML5 FileApi?
Intereting Posts
La meilleure façon d'obtenir la clé d'un objet javascript clé / valeur Chargement initial des données dans angularjs Opposée d'append dans jquery Envoi d'informations d'avant en arrière avec AJAX L'événement Click ne déclenche pas dans jquery La fonction onsubmit n'est pas définie Importer dans le bloc-notes en utilisant jquery La fonction d'auto-exécution Javascript "n'est pas une fonction" Ng-repeat + filter like feature dans Meteor Blaze / Spacebars PJAX écoute pjax: événement final avec js standard Les index négatifs dans les tableaux JavaScript contribuent-ils à la longueur du tableau? Mon script Greasemonkey ne trouve pas les éléments (liens) sur la page? Exécuter le script javascript après avoir chargé ajax une page – ne fonctionne pas Convertit la chaîne de largeur css en nombre régulier Comment modifier le répertoire de navigation par défaut pour les images dans KCFinder?

Récupérer les métadonnées de l'image EXIF ​​à partir de l'image chargée HTML5 FileApi?

J'utilise HTML5 File API & FileReader .

HTML: 

<div id="holder"></div>

JS: 

 <script> var holder = document.getElementById('holder'), state = document.getElementById('status'); if (typeof window.FileReader === 'undefined') { state.className = 'fail'; } else { state.className = 'success'; state.innerHTML = 'File API & FileReader available'; } holder.ondragover = function () { this.className = 'hover'; return false; }; holder.ondragend = function () { this.className = ''; return false; }; holder.ondrop = function (e) { this.className = ''; e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { console.log(event.target); holder.style.background = 'url(' + event.target.result + ') no-repeat center'; }; console.log(file); reader.readAsDataURL(file); return false; }; </script>

Comment puis-je récupérer les métadonnées EXIF ​​de l'image téléchargée?

J'ai essayé de l'utiliser.

HTML: 

 <img src="image1.jpg" id="img1" exif="true" />

JS: 

 console.log($("#img1").exifPretty());

Cela renvoie uniquement un ensemble vide.

J'utilise également le plugin FileReader JQuery .

Lorsque j'utilise la fonction de chargement, je reçois un fichier qui est une extension de l'objet Fichier d'origine. 

 on: load: function(e, file) { }

Mais comment puis-je récupérer les métadonnées EXIF?

Si vous obtenez EXIF ​​indéfini, utilisez var EXIF = require('./exif.js'); FTW.

J'ai réussi à faire fonctionner cette bête sans astuces de magie (essai rapide et sale et résultat d'erreur): 

 'use strict'; var EXIF = require('./exif.js'); $(function() { $('#fileinput').on('change', function(){ var files = this.files, i=0; for(i=0; i<files.length;++i){ previewImage(this.files[i]); } }); function previewImage(file) { var gallery = $('#gallery'), thumb = null, img = null, reader= null; if(!file.type.match('image/*')){ throw 'File type must be an image'; } thumb = $('<div />',{class: 'thumbnail'}).appendTo(gallery); img = $('<img />'); reader = new FileReader(); reader.onload = function(e){ img.prop('src',reader.result); // important for exif-js! Set src attribute after calling img.prop img.src = img.prop('src'); img.appendTo(thumb); EXIF.getData(img, function() { console.log(EXIF.pretty(img)); }); }; reader.readAsDataURL(file); } });

Avec l'aide d'exif.js, le script suivant peut obtenir l'exif à partir de l'entrée de fichier 

 $('#imageupload').change(function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { var exif = EXIF.readFromBinaryFile(this.result); console.log(exif); } reader.readAsArrayBuffer(file); });

C'est la solution: 

 on: load: function(event, file) { // get image meta data var base64 = event.target.result.replace(/^.*?,/,''); var binary = atob(base64); var exif = EXIF.readFromBinaryFile(new BinaryFile(binary)); }