Récupération et affichage des exifs

[photoclic]

Bonjour,

Grâce à the Godfather, les exifs sur les photos sont dorénavant gardés sur servimg.
Sur firefox par exemple maintenant, avec le module complémentaire FxIF, les exifs des photos postées sur mon forum sont bien là, alors que je ne les avais pas avant.

je souhaiterais  récupérer quelques infos pour les afficher au dessus de chaque photo postée sur mon forum.
Il s'agirait des informations existantes suivantes: Appareil photo, Focale, vitesse, Ouverture, ISO, correction d'exposition.

Neptunia m'a fourni ce lien qui peut aider pour récupérer les exifs, mais j'en suis incapable. Lien google

Peut-être que cela peut servir, j’ai un javascript actuellement qui numérote les photos postées qui est le suivant:

Code:

$(function(){
          var M14_IMG = 1;
     $('.postbody .content img[src*="servimg.com"]').each(function() {
        if (M14_IMG !==  1){
        $(this).before('<br /> '+M14_IMG +'<br />').after('<br />');}
      M14_IMG ++;
        });
        });

Il permet donc de mettre automatiquement un numéro au dessus de chaque photo, sauf sur la première (j’ai ajouté cette condition pour ne pas avoir un n° au dessus de la photo quand elle est seule).

En fait c’est à côté de ce n° et centré au dessus de la photo que les exifs seraient bien ( y compris sur la 1ière photo qui n’a pas de n°).

Les exifs récupérés étant: Appareil photo, Focale, vitesse, Ouverture, ISO, correction d'exposition.

ça pourrait donner au dessus de la photo (avec une couleur de police “gris pale” par exemple):

photo 1 (exifs complets) :                   Exif: Nikon Corporation( NIKON D750 ) | 100 mm | 1/500 sec | f/6.3 | ISO: 100 | Cor. Exp.: 0 EV |

photo 2 (exifs incomplets, :    2           Exif: Canon( Canon EOS 5D Mark III ) | | 30 sec | | ISO: 200 | Cor. Exp.: 0 EV |
manque la Focale)

photo 3 (Pas d’exifs):             3           Exif: ( ) | | | | ISO: | Cor. Exp.: |

photo 4 (exifs complets):        4           Exif: ( ) | 100 mm | 1/500 sec | f/2.8 | ISO: 100 | Cor. Exp.: 1 EV |

Etc.

Je ne sais pas si ça peut aider à avancer.

Merci par avance pour votre aide.

[photoclic]

Up

[photoclic]

Up.

[Neptunia]

Bonjour ^^


Comme spécifié dans le tutoriel sur le javascript :
Javascript sur Forumactif

Que ne peut-on pas faire avec du javascript ?


On ne peut pas :

Charger le contenu d'une page d'un autre domaine ( sauf charger un script ).
Lire ou sauver des fichiers du disque dur.
Accéder au contenu d'une page d'un autre domaine.

Le script sur ton forum, et l'image ailleurs, ça ne fonctionne pas.

Il faut donc tout avoir sur un même domaine, javascript, images et page html affichant les images.
Ajouter les exifs sur les photos

---

En version courte :
Ce que tu demande n'est pas réalisable sur plateforme mais uniquement sur un forum auto-hébergé. Sauf si l'image est d'abord hébergée sur la galerie du forum (20 mo gratuits, payant au-delà)

[photoclic]

Merci Neptunia pour ces précisions.

Grosse déception pour moi.

N'est-il pas possible dans ce cas de développer cela dans un autre langage et l'héberger ailleurs puis d'appeler cette routine en javascript sur mon forum ?

Un truc dans ce genre:

Code:

$(function(){   
            try{
           
 $.getScript('http:/adresse de l'hébergeur de la routine 
etc.
etc.

[photoclic]

Un lien qui peut peut-être aidé:: https://www.google.fr/search?q=exif+javascript&ie=utf-8&oe=utf-8&gws_rd=cr&ei=sB4pV_K8I8mcgAbfm7_wBg#safe=off&q=exif+javascript

Merci encore à tous ceux qui sont passés par là.

[photoclic]

up

[photoclic]

Up

[photoclic]

Up

[Invité]

Bonjour,

- Grâce à the Godfather, les exifs sur les photos sont dorénavant gardés sur servimg.

- je souhaiterais récupérer quelques infos pour les afficher au dessus de chaque photo postée sur mon forum.
Il s'agirait des informations existantes suivantes: Appareil photo, Focale, vitesse, Ouverture, ISO, correction d'exposition.

Magnifique,merci tonton godfather on va se servir de ce système pour afficher ces infos ^^
Chargez les exifs avec la méthode load() de jQuery en y incluant bien les identifiants nécessaires(id,class etc...) pour la class concernée elle est nommée .info-exif

Code:

$(document).ready(function() {
$('.postbody img[src*="servimg"]').each(function() {
var url = $(this).parent().attr('href');
$(this).before('<div id="exif"></div>');
$(this).closest('a').find('#exif').load(''+url+' .info-exif');
$(this).closest('a').find('#exif').insertBefore($(this).parent());
});
});

- En fait c’est à côté de ce n° et centré au dessus de la photo que les exifs seraient bien ( y compris sur la 1ière photo qui n’a pas de n°).

- ça pourrait donner au dessus de la photo (avec une couleur de police “gris pale” par exemple):

photo 1 (exifs complets) : Exif: Nikon Corporation( NIKON D750 ) | 100 mm | 1/500 sec | f/6.3 | ISO: 100 | Cor. Exp.: 0 EV |

photo 2 (exifs incomplets, : 2 Exif: Canon( Canon EOS 5D Mark III ) | | 30 sec | | ISO: 200 | Cor. Exp.: 0 EV |
manque la Focale)

photo 3 (Pas d’exifs): 3 Exif: ( ) | | | | ISO: | Cor. Exp.: |

photo 4 (exifs complets): 4 Exif: ( ) | 100 mm | 1/500 sec | f/2.8 | ISO: 100 | Cor. Exp.: 1 EV |

Etc.

Adaptez deux codes(numéro d'image + celui pour les exifs).

Le reste peut se faire avec la méthode :contains() de jQuery au pire attendez quelqu'un de plus polyglotte un peu de patience(encore) suis navré!

Bonne journée

[photoclic]

Grâce à "tonton" Godfather en effet un énorme pas a été fait sur servimg, et je lui suis très reconnaissant pour cela.

Un grand merci à toi Don Vito Corleone d'avoir pris le temps pour avancer sur ce sujet avec ton code et tes pistes de développement.

Je n'ai malheureusement pas le niveau pour aller plus loin et ne suis pas non plus polyglotte

[Invité]

Hello,

Pas de soucis merci à vous d'être indulgent et patient ^^ honnêtement ce n'est pas du développement juste deux trois bricoles... plus du plaisir surtout pour ma part... en tout cas tant mieux si ça avance un peu le sujet c'est le principal.

J'ai testé une autre façon pour la numérotation des images (par CSS plutôt que javascript) donc en reprenant mon code et en supprimant celui qui numérote les images vous pouvez ajouter ceci à votre feuille de style css c'est exactement le même rendu plus ou moins et c'est plus facile:

Code:

.post {
    counter-reset: varImages;
}
#exif {
  display: table;
}
#exif:before {
    display: table-cell;
    vertical-align: top;
    counter-increment: varImages;
    content: "Photo " counter(varImages) ": ";
}
#exif:first-child:before {
font-size: 0px;
}
#exif:first-child .info-exif {
  text-indent: 0px !important;
}
.info-exif {
text-indent: 20px;
}

Petite parenthèse pour la mention "Pas d'exifs" ...car c'est impossible j'espère ne pas me trompé mais il y aura toujours un minimum d'infos(taille , type nom hauteur largeur) ..

Je reviendrais vers vous si du nouveau... peut-être qu'on vous donnera de l'aide avant? Un bon courage

@+

[photoclic]

Un grand merci Don Vito Corleone. Une grande avancée en effet.

Je viens d'essayer.
L'affichage des exifs se fait bien au dessus des photos.
Par contre, cela se présente sous forme de plusieurs lignes, ce qui fait un gros pavé au dessus de la photo.
Dans mon esprit, il s'agirait plutôt d'une ligne au dessus de la photo, comme cela par exemple:
Exif: Nikon Corporation( NIKON D750 ) | 100 mm | 1/500 sec | f/6.3 | ISO: 100 | Cor. Exp.: 0 EV |

[Invité]

Pas de soucis

remplacez le code css par celui-ci:

Code:

.post {
    counter-reset: varImages;
}
#exif {
  display: table;
}
#exif:before {
    display: table-cell;
    vertical-align: middle;
    counter-increment: varImages;
    content: "Photo " counter(varImages) ": ";
}
#exif:first-child:before {
font-size: 0px;
}
.info-exif tr td:first-child:after {
    content: ":";
}
.info-exif tr:not(:last-child):after {
    content: "|";
}
.info-exif tr {
    display: inline-table;
}

[photoclic]

C'est mieux. Merci.

Toutefois, là nous avons cette fois les infos affichées sur 3 lignes et certaines sont inutiles, je ne sais s'il est possible d'en supprimées quelques unes. Je vous mets ci-dessous le résultat.

Spoiler:

D'autre part, les exifs n'apparaissent pas lorsqu'il n'y a qu'une seule photo dans le post.

[Invité]

Pour enlever les infos on peut modifier le script par celui-ci(javascript):

Code:

$(document).ready(function() {
$('.postbody .content img[src*="servimg.com"]').each(function() {
var url = $(this).parent().attr('href');
$(this).before('<div id="exif"></div>');
$(this).closest('a').find('#exif').load(''+url+' .info-exif' ,function() {
$(this).closest('a').find('#exif').insertBefore($(this).parent());
$('.info-exif tr td:contains(Hauteur)').parent().remove();
});
});
});

Pour l'exemple j'ai choisis de supprimer l'information "Hauteur" et donc pour supprimer les autres il faudrait modifier de cette façon la ligne:

Code:

$('.info-exif tr td:contains(Hauteur), .info-exif tr td:contains(Make)').parent().remove();

Etc...

D'autre part, les exifs n'apparaissent pas lorsqu'il n'y a qu'une seule photo dans le post.

là ça va être compliqué de répondre car chez moi ça fonctionne bien

Bonne nuitée / soirée

[photoclic]

Merci Don Vito Corleone de poursuivre avec moi; c'est vraiment très sympa et je suis vraiment ravi d'avancer sur ce sujet.

J'essaie avec le nouvel élément fourni et je reviens.

[photoclic]

C'est nickel Don Vito, un grand Merci, j'ai réussi à retirer les infos que je souhaitais retirer. Je suis vraiment heureux.

Pour peaufiner, si c'est possible, maintenant que je perçois mieux le résultat, ce serait d'avoir 1 ou 2 sauts de ligne avant "Photo: x".

Ensuite pour aller plus loin, la taille ("Taille:") au début des exifs et non au milieu comme actuellement (ou à la fin des exifs).

Et pour aller encore plus loin, les textes en français:
ApertureFNumber : Ouverture
ExposureTime: Temps d'expo
ExposureBiasValue: Correction Expo
FocalLength: Focale
ISOSpeedRatings: ISO
Model: Modèle

[Invité]

Coucou (Morphée à voulu me draguer hier j'ai pas hésité...à aller dormir c'était un homme désolé) ^^

Plus sérieusement suis content et ravi que vous soyez heureux du résultat bien qu'il faut un peu de patience mais du moment que votre sujet avance c'est cool,pour la première question et bien on pourrait mettre à la place des <br/> un margin-top de cette façon dans le css:

Code:

#exif:not(:first-child) {
    margin-top: 30px;
}

Pour mettre la taille au début on pourrait mettre cette ligne dans le dernier callback :

Code:

$(this).find('.info-exif tr td:contains(Taille)').parent().insertBefore($(this).find('tr:first-child'));

En changeant le insertBefore par insertAfter et le :first-child par :last-child vous mettrez la taille à la fin de la liste.
Ensuite pour changer les textes on peut mettre ceci :

Code:

$(this).find('.info-exif tr td:contains(ApertureFNumber)').text('OUVERTURE');

Au final la fin donnerait ça:

Code:

$(this).closest('a').find('#exif').load(''+url+' .info-exif' ,function() {
$(this).closest('a').find('#exif').insertBefore($(this).parent());
$(this).find('.info-exif tr td:contains(Taille)').parent().insertBefore($(this).find('tr:first-child'));
$(this).find('.info-exif tr td:contains(ApertureFNumber)').text('OUVERTURE');
});

Un bon café et à fond les manettes ^^ bonne journée je ne vous oublie pas et garde un oeil sur le sujet.

@+

[photoclic]

A nouveau un grand merci Don Vito.
On est à un cheveu de ce que j'avais en tête.
Quand je pense que j'ai cherché à faire ça jusqu'à 2h du matin sans succès

Resterait juste un détail:
Est-il possible d'avoir:
Photo:x toujours en haut à gauche de la photo et les exifs toujours centrés sur la photo.

[Invité]

No soucis ^^

Dans le code CSS vous avez cette partie:

Code:

#exif:before {
    display: table-cell;
    vertical-align: middle;
    counter-increment: varImages;
    content: "Photo " counter(varImages) ": ";
}

En y mettant un width à 5% pour commencer puis en ajustant après ça donne quoi? :

Code:

#exif:before {
    display: table-cell;
    vertical-align: middle;
    counter-increment: varImages;
    content: "Photo " counter(varImages) ": ";
    width: 5%;
}

Sinon peut-être un text-align mais dans cette partie là:

Code:

#exif {
  display: table;
  text-align: center;
}

[photoclic]

Alors en appliquant le width: 5%; dans le cas 1, ça décale les exifs vers la droite sans les centrer; et finalement je trouve que c'est bien ainsi.
En appliquant le text-align: center; comme indiqué en 2, il ne se passe rien ..

Un grand chapeau et une infinie reconnaissance à Monsieur Don Vito pour tout cela et pour votre patience


A savoir, pour les autres membres intéressés par tout ça, cela ne fonctionne que sur servimg. En hébergeant une photo sur hostimg ou sur Zupimage par exemple il me semble que cela ne fonctionnerait pas.

Peut-être aussi que des adaptations seraient à faire pour les forums en PHPBB2.

[photoclic]

Je m'aperçois que les photos qui n'ont pas d'exifs ne sont plus numérotées.


Est-il possible de pouvoir choisir la couleur du n° de la photo, et d'avoir:
. soit tout sur la même ligne,
. soit ainsi, mais avec le n° centré

(avec ce code, le N° est sur la ligne suivante et au bord haut gauche)

Si trop compliqué, tant pis.

[Invité]

Bonjour,

Oki pour le centrage du texte avec un width.
Sinon pour les images vous pouvez tout à fait reprendre l'ancien code c'est vous qui voyez mais il fallait juste modifier le script javascript :

Code:

$(document).ready(function() {
$('.postbody .content img').each(function() {
var url = $(this).closest('a[href*="servimg.com"]').attr('href');
$(this).before('<div id="exif"></div>');
$(this).closest('a').find('#exif').load(''+url+' .info-exif' ,function() {
$(this).closest('a').find('#exif').insertBefore($(this).parent());
$(this).find('.info-exif tr td:contains(Taille)').parent().insertBefore($(this).find('tr:first-child'));
$(this).find('.info-exif tr td:contains(ApertureFNumber)').text('OUVERTURE');
});
});
});

Pour la couleur c'est cette partie là dans le code css :

Code:

#exif:before {
    display: table-cell;
    width: 5%;
    vertical-align: middle;
    counter-increment: varImages;
    content: "Photo " counter(varImages) ": ";
    color: red; /* Couleur texte */
}

Du coup au final il reste simplement à mettre en place les mentions : "Pas d'exifs" "Exifs incomplets" etc ?!

@+

[photoclic]

C'est tout bon Don Vito.

Merci pour tout.