exif et javascript ou jquery

a marqué ce sujet comme résolu.

Je pense qu’avec node-exif tu devrais pouvoir t’en sortir.

Il existe pas mal de bibliothèque pour ça. exif sur npmjs.org. Mais non ce n’est pas une fonctionnalité de base de JS, je ne sais pas pour jquery.

+0 -0

Oui, c’est possible de récupérer la totalité des métadonnées d’une image en JavaScript pur, en JQuery et avec une autre librairie.

Voici 3 exemples de récupérations de métadonnées :

  1. En JavaScript pur, tu peux utiliser l’objet Image pour récupérer les métadonnées de l’image, comme sa taille, son type, sa largeur, sa hauteur, etc.

  2. En JQuery, tu peux utiliser la fonction $.get() pour récupérer les métadonnées de l’image, comme son chemin, son type, sa résolution, etc.

  3. Avec une autre librairie, tu peux utiliser le module ImageMagick pour récupérer les métadonnées de l’image, comme sa date de création, sa date de modification, sa taille, sa profondeur de couleur, etc.


JS Pur

// Créer une nouvelle instance de l'objet Image
let image = new Image();

// Définir le chemin de l'image
image.src = 'path/to/image.jpg';

// Récupérer la taille de l'image
let imageWidth = image.width;
let imageHeight = image.height;

// Récupérer le type de fichier de l'image
let imageType = image.type;

Avec jQuery


 $.get('/images/image.jpg', function(data) {
    var imagePath = data.path;
    var imageType = data.type;
    var imageResolution = data.resolution;
    console.log('Image path: ' + imagePath);
    console.log('Image type: ' + imageType);
    console.log('Image resolution: ' + imageResolution);
});

Avec ImageMagick

L’utilisation de ImageMagick en JavaScript peut être faite grâce à son api. Il est possible d’utiliser la méthode identify pour obtenir les métadonnées d’une image. Par exemple, la commande suivante permet d’obtenir la date de création, la date de modification, la taille et la profondeur de couleur d’une image:

const imageMagick = require('imagemagick');

imageMagick.identify(['image.jpg'], (err, output) => {
    if (err) throw err;
    console.log(output);
});

Cette commande retournera un objet contenant les métadonnées suivantes :

{
    format: 'JPEG',
    width: 800,
    height: 600,
    depth: 8,
    createdAt: '2018-10-01 14:10:45',
    modifiedAt: '2018-10-01 14:10:45'
}

La méthode readMetadata est très similaire à identify, mais elle retourne un objet plus détaillé contenant toutes les métadonnées de l’image. Ceux-ci peuvent inclure des informations supplémentaires telles que les informations EXIF, les métadonnées IPTC et les informations de copyright. Par exemple, la commande suivante permet d’obtenir toutes les métadonnées d’une image :

const imageMagick = require('imagemagick');

imageMagick.readMetadata('image.jpg', (err, output) => {
    if (err) throw err;
    console.log(output);
});

Cette commande retournera un objet plus détaillé contenant toutes les métadonnées de l’image, y compris les informations EXIF, IPTC et copyright :

{
    format: 'JPEG',
    width: 800,
    height: 600,
    depth: 8,
    createdAt: '2018-10-01 14:10:45',
    modifiedAt: '2018-10-01 14:10:45',
    exif: {
        ...
    },
    iptc: {
        ...
    },
    copyright: {
        ...
    }
}

En complément de la réponse de @ache: node-exif

Node-exif est un module Node.js qui permet de lire les métadonnées EXIF d’une image. Il prend en charge les formats JPEG, TIFF et RAW.

[en cours de correction suite à un retour + fautes d’étourderie]

+1 -0

bonsoir merci pour ta réponse détaillé. Je connaissais déjà pour le JS et Jquery mais je ne savais pas comment faire pour récupéré le exif.

Comme au final je vais utilisé node webkit, j’ai donc chargé la librairie node-exif vis npm puis utilisé ton premier exemple mais sa me donne une erreur

Uncaught Error: Cannot find module 'node-exif' Require stack:

  • C:\Users\steph\OneDrive\Bureau\nwjs-sdk-v0.70.1-win-x64\package.nw/accueil.html at Module._resolveFilename (node:internal/modules/cjs/loader:1019:15) at Module._load (node:internal/modules/cjs/loader:860:27) at Module.require (node:internal/modules/cjs/loader:1085:19) at require (node:internal/modules/cjs/helpers:98:18) at self.require (

    <anonymous>

    :11:26) at self.require (

    <anonymous>

    :11:26) at chrome-extension://elmjgiohihejmikcabnbofbgialdgkie/scritp.js:1:12

oui sait ce que j’ai fait justement mais j’ai quand même cette erreur

stephcache

Je ne m’y connais pas assez malheureusement.

En gros si je devais résumer mes connaissances : le système de require de Node.js permet d’importer du code depuis d’autres fichiers. Pour ce faire : appel à require() et en passant en paramètre le chemin vers le fichier à importer.

La commande npm install permet d’installer des modules externes que l’on peut ensuite importer dans nos fichiers. Ces modules sont stockés dans le dossier node_modules. Une fois installés, on peut les importer dans nos fichiers grâce à la fonction require().

Donc bon ça devrait marcher, j’ai aucune idée de pourquoi dans ton cas ça beugue :(

@stephcache: Donne nous le contenu de ton package.json pour qu’on puisse diagnostiquer ce qui se passe.

@Herbe: Ton code d’exemple pour node-exif ne fonctionne pas chez moi. Peut-être que tu t’es basé sur une ancienne version ?

Chez moi ceci fonctionne par-contre, c’est le code d’exemple du package.

const ExifImage = require('node-exif').ExifImage;

try {
    new ExifImage({ image : './path_to_image' }, function (error, exifData) {
        if (error)
            console.log('Error: '+error.message);
        else
            console.log(exifData); // Do something with your data!
    });
} catch (error) {
    console.log('Error: ' + error.message);
}
+0 -0

Pour le package.json

{
  "name": "appli",
  "main": "accueil.html",
  "window": {
    "width": 1400,
    "height": 800,
    "frame": true,
    "resizable": true,
    "position": "center",
    "title": "teste"
  },
  "dependencies": {
    "exif": "^0.6.0"
  }
}

Pour le js

var ExifImage = require('exif').ExifImage;

try {
    new ExifImage({ image : 'IR_FLIR1109__20221129_073144.jpg' }, function (error, exifData) {
        if (error)
            console.log('Error: '+error.message);
        else
            console.log(exifData); // Do something with your data!
    });
} catch (error) {
    console.log('Error: ' + error.message);
}

Le fichier js et image sont au même niveau

Comme sa plus d’erreur, par conte j’ai pas de donnée qui viens de la photo

+0 -0

C’est certainement que ton image ne contient pas de meta-donnée Exif (le format largement le plus utilisé pour ajouter des meta-donnée).

Essaye avec celle-ci:

Étalage de fruits et légumes
Étalage de fruits et légumes

Il faut comprendre qu’il y a deux types de méta-données. Celle-liée à l’image et à son format et celles liées à son conteneur. Exif est lié au conteneur et donne bien plus d’info (quand elles existent …, date de prise de la photo, coordonnées GPS, appareil utilisée, logiciel de retouche, …) que les données liées au format (qui sont des données techniques sans plus, taille de l’image, nombre de couleur, …).

JS et JQuery permettent de lire les méta-données liées au format alors qu'exif que tu utilises permet de lire les méta-données liées au conteneur.

+0 -0

Je viens de testé et sa semble me marché même si je sais pas ce qui s’affiche est complet.

Pour mon image, je suis sur la présence de méta-donnée car avec le logiciel Metadata++ sa me récupére toute les méta. je peux te montré le fichier et le résultat avec le logicielle mais pas les mettre en ligne

Ok, il est possible que ton image utilise autre chose que Exif (même si je n’en ai jamais rencontré). Ou que ça soit des commentaires JPEG (le format JPEG supporte des commentaires bruts).

Est-ce que tu sais si ce sont des métadonnées IPTC ou XMP ? :S C’est moins utilisé mais c’est possible si tu utilises les logiciels Adobe.

Edit: J’ai regardé et le logiciel Exiv2 permet de visualiser les différents format de méta-data (justement Exif, XMP et commentaire JPEG). Ça vaut peut-être le coup de regarder.

+0 -0

Ok … Alors ce que j’ai reçu par email est un rapport de metadata++. Là on parle d’une image de 160 mille pixels (pas millions, mille) mais de plus d’1Mo. Donc une partie très importante de l’image sont les méta-datas.

Le rapport est constitué comme ceci:

[D'OU_VIENT_l'INFO] Offset_de_l'info Description_de_l'info

Ainsi chaque méta donné est sur une ligne et le rapport comporte plus de 2000 lignes.

La partie à propos de l’origine de l’information est assez floue, mais on y trouve des parties comme [JFIF] ou [GPS] (qui correspondent à des données Exif même s’il y a également une section [Exif]).

On y retrouve également ce message d’erreur ainsi qu’un autre :

[ExifTool] - Warning: [minor] Possibly incorrect maker notes offsets (fix by -42?)

Qui laisse pensé que c’est pour ça que exif, le package node que tu as utilisé à rencontrer un problème. Alors que l’image contient bien des données EXIF et XMP.


Ainsi de cette analyse, ce qu’il en ressors est que tu devrais utiliser des outils plus puissants pour lire les méta-data, des outils qui supportent même les formats propriétaires très spécifiques et pour lesquels il existe peu de ressource libre sur internet.

Je te conseille d’utiliser le plus de bibliothèque possible afin d’arriver à ton but. Celle-ci est potentiellement prometteuse. exiftool. Exiftool étant une référence en matière de métadonnée, si le package est du même niveau alors tu devrais avoir un résultat de qualité.

Pour finir, si tu ne trouves vraiment pas, il faudra peut-être te pencher vers d’autres langages que JS pour ouvrir ton fichier, ou encore explorer la seule documentation que tu trouveras sur internet sur ce format propriétaire en tapant [LE_NOM_DE_LA_MARQUE_DE_L'APPARREIL] Interface Requirements TIFF. Ce document spécifie que les données que tu cherches sont effectivement cachées au sein des formats Exif, XMP et TIFF (des images DANS une images). Cela va être compliqué à extraire à la main mais peu de logiciels open-source / libres vont le supporter.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte