J'ai besoin de lire les données EXIF d'une image. Plus important encore, j'ai besoin de trouver des informations d'orientation sur une image qui se charge depuis un service distant par exemple https://storage.googleapis.com/my-app-images/xxx.jpg
J'ai essayé d'utiliser la bibliothèque EXIF-JS mais je n'ai pas compris pourquoi cela ne fonctionnait pas dans angular 6.
3 Réponses :
J'ai créé un extrait pour vous https://stackblitz.com/edit/angular-exifjs -exemple
L'image est fournie en utilisant la chaîne base64 car pour autant que je sache, Stackblitz ne prend pas en charge les actifs dans les projets Angular. Notez également que exif-js est inclus avec la balise script dans index.html en utilisant CDN. Dans votre projet, vous pouvez utiliser un fichier local si vous le souhaitez.
storage.googleapis.com/hiri-web-images/… Aide moi avec cette image. Notez une base 64 encodée.
@JamesJ Téléchargez votre image et encodez-la en base64.
Dans mon application Angular 6, j'ai ajouté
getExif(result) {
console.log(result);
EXIF.getData(result, function() {
const make = EXIF.getTag(this, 'Make');
const model = EXIF.getTag(this, 'Model');
const orientation = EXIF.getTag(this, 'Orientation');
const makeAndModel = document.getElementById('makeAndModel');
console.log(make, model, orientation);
});
}
à mon index.html
À l'intérieur du composant, j'avais besoin d'exif si je l'importe en haut -> const EXIF = require ('exif-js');
puis utilisez la fonction standard:
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
Salut @Ivan vient de travailler dans l'application angular 7. Voici un petit changement dans votre réponse -
Au lieu d'inclure la balise de script dans index.html, j'ai utilisé
npm install exif-js --save
et dans le fichier de module du composant, je l'utilise comme fournisseur.
Comment l'avez-vous ajouté en tant que fournisseur? Lorsque j'y ajoute EXIF (avec l'importation correspondante), j'obtiens une erreur indiquant que EXIFStatic n'est pas attribuable au type Provider .
Pouvez-vous être plus précis sur la façon dont la bibliothèque ne fonctionne pas avec angular? Comment l'utilisez-vous? Montrez-nous du code s'il vous plaît.
@Zak J'utilise ceci: npmjs.com/package/exif-js Après installation via npm, à l'intérieur du composant, j'importe la bibliothèque comme ceci: import * as EXIF de "../Path-to-node-module" Ensuite, lorsque l'URL de l'image est disponible, je ferais quelque chose comme ceci: EXIF. getData (' storage.googleapis.com/my-app-images/xxx.jpg ', function () {var make = EXIF.getTag (this, "Make"); var model = EXIF.getTag (this, "Model");});
github.com/blueimp/JavaScript-Load-Image
La fonction EXIF.getData a besoin du contenu de l'image en base64, pas de l'url de l'image. Vous devez d'abord lire l'image et la convertir en chaîne, puis la transmettre à EXIF.getData