Vous avez un fichier en base 64 et vous voudriez récupérer ses informations EXIF?
Voici une technique pour pouvoir le faire depuis une application javascript :
Base 64 :
Tout d’abord, qu’est-ce que c’est le base 64 ?
En informatique, base64 est un codage de l’information utilisant 64 caractères, choisis pour être disponible sur la majorité des systèmes. (sources : wikipedia).
Ce qui permet, entre autre, d’encoder une image sous forme de string, ce qui est plus simple à manipuler quand vous devez par exemple envoyer l’image vers un serveur externe.
Exif.js :
Ces informations EXIF ne peuvent pas être récupérées directement depuis la string en base 64 avec une méthode de type maPhotoEnBase64.getOrientationFromEXIF() .
Il y a donc 2 méthodes :
- Soit parser la string en base64 manuellement pour récupérer les informations (telle information se situe au 18ème bytes, etc…)
- Soit utiliser une librairie qui fait déjà tout ça.
Personnellement, je suis assez feignant donc je vais prendre la deuxième solution : je vais utiliser la librairie “Exif.js”
Vous pouvez trouver cette librairie ici : https://github.com/jseidelin/exif-js.
Elle met à disposition le fameux fichier “exif.js” qui vous permettra de récupérer les informations EXIF, mais également des exemples d’utilisation (répertoire “example”).
Installation :
Il vous suffit e récupérer le fichier “exif.js” et de l’ajouter à votre projet.
Puis ensuite il sera nécessaire de l’inclure dans votre page html tel que ci-dessous :
<!doctype html> <html> <head> <script type="text/javascript" src="exif.js"></script> </head> ...
Si vous utilisez bower, une petite ligne de commande et le tour sera joué :
$ bower install exif-js --save
Utilisation :
Prenons l’exemple d’un upload de fichier, le fichier est chargé depuis une sélection sur son ordinateur, puis on récupère ce fichier en base 64 (reader.readAsDataURL) :
var image = new Image();
//create file input without appending to DOM
var fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.onchange = function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
image.src = reader.result;
EXIF.getData(image, function() {
var orientation = EXIF.getTag(this, 'Orientation');
});
};
};
fileInput.click();
Il est évidemment possible de récupérer l’ensemble des tags du EXIF listés ici : http://fr.wikipedia.org/wiki/Exchangeable_image_file_format#Exemple
Exceptions :
Tout n’est pas rose, il existe évidemment quelques exceptions à la récupération de données EXIF :
- EXIF est supporté par le format JPG mais pas par le type de fichier PNG
- Si vous essayez de récupérer les informations EXIF depuis une photo de l’album dans une application mobile depuis le module Camera de Cordova par exemple, vous n’aurez pas accès aux informations EXIF. Celles-ci sont en effet tronquées. Mais cela marche avec une photo prise.