[XSLT] Intégration automatique des dimensions d'une image

**souffle56** · 26/03/2010, 22h24

Bonjour,
Voilà ce qui m'arrive: J'ai fait un petit pgm tout simple, en xml/xsl, utilisé pour afficher une image. Ca fonctionne très bien, sauf que j'aimerais bien pouvoir récupérer automatiquement (via javascript par exemple...) les dimensions de l'image, pour m'éviter d'avoir à les retrouver et à les enregistrer manuellement à chaque fois !
Du fait, via cette adresse, j'ai inséré le code proposé dans le code XSL, c'est à dire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script language="javascript">
var w=document.images["idimage"].width;
var h=document.images["idimage"].height;
document.write("L'image fait " + w + " pixels de large sur " + h + " pixels de haut");
</script>

mais là, je cale carrément car, autant je commence à me débrouiller en xml/Xsl, autant, pour coté javascript, je rame un peu !

Autrement dit, dans le cas présent, comment puis-je faire, SVP, pour récupérer les infos de l'image et les intégrer à la ligne suivante (width et height) ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="{$adresse}" id="idimage" width="{$largeur}" height="{$hauteur}"/>

Code XML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
 
<enregistrements>
	<titre>Dauphins
		<image>http://naturendanger.canalblog.com/albums/especes_animales_en_voie_de_disparition_ou_protegees/m-Dauphins.jpg</image>
	</titre>
</enregistrements>

Code XSL (+ Javascript):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" 
encoding="utf-8" 
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
 
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Images</title>
 
<script language="javascript">
var w=document.images["idimage"].width;
var h=document.images["idimage"].height;
document.write("L'image fait " + w + " pixels de large sur " + h + " pixels de haut");
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
<xsl:variable name= "largeur">"500"</xsl:variable>
<xsl:variable name= "hauteur">"375"</xsl:variable>
<xsl:variable name= "adresse"><xsl:value-of select= "enregistrements/titre/image"/></xsl:variable>
 
<div id="image" style="position:absolute; width:{$largeur}px; height:{$hauteur}px; z-index:1">
	<img src="{$adresse}" id="idimage" width="{$largeur}" height="{$hauteur}"/>
</div>
 
</body>
</html>
</xsl:template>
</xsl:stylesheet>

En vous remerciant par avance pour toute proposition qui pourrait m'aider à arranger cette affaire là !

**Morbo** · 27/03/2010, 15h35

Salut!
Pourquoi tu veux spécifier les dimension dans le html? Les navigateurs se contenteraient très bien de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="{$adresse}" id="idimage"/>

.

Sinon pour info général, le javascript s'exécute en dernier dans le navigateur, donc après la transformation XSL. Donc impossible de passer des variables du javascript vers le XSL.
Bon si on veut vraiment, il y a un moyen qui complique quand même pas mal les choses qui consiste à piloter la transformation xsl entièrement depuis le javascript. Un exemple ici : http://xml.developpez.com/sources/?p..._javascript_FF

**souffle56** · 27/03/2010, 16h55

Salut Morbo,
En fait, j'ai un peu simplifié les données car si j'ai cet intérêt pour récupérer les dimensions des images, c'est aussi pour pouvoir les ajuster ensuite, via un facteur d'échelle, à une dimension prédéfinie (par exemple "height" = 100px, et height en conséquence) !
Maintenant, quand tu dis:

Envoyé par Morbo

Salut!
Pourquoi tu veux spécifier les dimension dans le html? Les navigateurs se contenteraient très bien de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="{$adresse}" id="idimage"/>

. Sinon pour info général, le javascript s'exécute en dernier dans le navigateur, donc après la transformation XSL. Donc impossible de passer des variables du javascript vers le XSL.

Merci pour les infos, je savais pas !

En conséquence, à ton avis, serait-il envisagable de s'y prendre à l'inverse, c'est à dire de récupérer l'adresse de l'image (via XML/XSL), pour la rebalancer à une fonction de type javascript, insérée dans le XSL, qui irait trouver les dimensions de l'image et procèderait elle-même à son affichage

ou faut-il s'y prendre comme tu dis quand tu mets:

Envoyé par Morbo

Salut!
Bon si on veut vraiment, il y a un moyen qui complique quand même pas mal les choses qui consiste à piloter la transformation xsl entièrement depuis le javascript. Un exemple ici : http://xml.developpez.com/sources/?p..._javascript_FF

Qu'en penses-tu ?

**Morbo** · 27/03/2010, 21h20

Le xsl-t ne fait pas de traitement d'image (car les données binaires->non-xml), tu as les options suivantes :
- Les processeurs xsl-t permettent d'écrire des extensions, tu pourrais en faire une pour extraire les dimensions d'une image. Je n'en n'ai jamais fait, donc j'ignore à quel point c'est complexe.
- Si tu dispose d'une technologie coté serveur (php, asp, java), tu pourrais créer des services sur des URL spécifiques qui calculent ces dimention.
Après dans ton xsl-t tu peux faire appel à la fonction document(url) qui va lire un document xml à l'url spécifié. par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document('http://monsite.com/calculdimension?img=image.png')/dimension/width

- Sinon, et peut être plus simplement, tu fais ces manipulations coté client en javascript.
Pour trouver les dimensions d'une image après son chargement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script type="text/javascript">
        function foo() {
            var image = document.getElementById("the_image");
            alert(image.offsetWidth);
            alert(image.offsetHeight);
        }
    </script>
</head>
<body onload="foo();">
    <img src="img.png" id="the_image">
</body>

. Alors tu pourrais utiliser ces données pour piloter la transfo xsl-t en les passant en paramètre comme le montre le lien que je t'ai donné précédemment... mais je trouve ça bof.
Perso je ne vois pas trop l'intérêt de faire ce redimensionnement via le xsl-t.
J'utiliserai plutôt le javascript pour manipuler l'affichage des données de la page et redimensionner les images. J'utilise pas mal la librairie jQuery en ce moment, ce serait simple avec faire avec.

**souffle56** · 27/03/2010, 22h21

Merci Morbo,
Depuis tout à l'heure, j'ai médité un peu sur cette affaire et, comme tu le suggères quand tu dis:

Perso je ne vois pas trop l'intérêt de faire ce redimensionnement via le xsl-t.
J'utiliserai plutôt le javascript pour manipuler l'affichage des données de la page et redimensionner les images. J'utilise pas mal la librairie jQuery en ce moment, ce serait simple avec faire avec.

Ca me semble plus judicieux, effectivement, d'utiliser une instrucion de type Jquery pour:
1 - Récupérer les dimensions d'une image
2 - Redimensionner cette image
3 - Afficher l'image en question

* A propos de jQuery , aurais-tu quelque suggestion (code ou adresse fournissant le code à utiliser en l'occurance) ?
(A ce propos, j'ai découvert une super adresse pour débuter / jQuery, mais, elle n'évoque pas ce genre d'instructions, plutôt comment réaliser très simplement divers effets sur blocs...) En attendant une éventuelle réponse de ta part, je vais continuer ma recherche jQuery, via l'ami Google... Merci bcp pour cette piste à laquelle je n'avais pas du tout pensé !

**Morbo** · 27/03/2010, 22h39

J'ai trouvé ça qui fait des animations durant le "resize" :
http://justinfarmer.com/?p=14
Sinon plus simplement il suffit de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("id_de_l_image").css({ height: 50px, width: 50px });

ou peut être en changeant les propriété html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("id_de_l_image").attr("width","50")

Sinon, il y a ce plugin qui a l'air simple : http://ditio.net/2010/01/02/jquery-image-resize-plugin/

**souffle56** · 30/03/2010, 00h46

Merci, Morbo pour tes propositions que j'ai trouvé très pertinentes !

Je suis en train de voir la 1ère proposition, plus complexe dans sa découverte que la 3ème (je te préciserai ce que ça donne, pour moi)
Pour la 2ème, intéressant...
La 3ème a l'avantage d'être très simple à mettre en oeuvre (sur une page html, en tous cas !) et de permettre un redimensionnement qui conserve bien les proportions entre la largeur et la hauteur de l'image, par contre je bute actuellement sur une perspective d'intégration de ce code sur une page XSL -> Du coup, j'ai lancé un nouveau sujet pour repartir la-dessus...
N'hésites pas à me donner ton avis, sur ce topic ou sur le nouveau !
En te remerciant !

**souffle56** · 04/04/2010, 23h08

Salut Morbo...
Bon, ben ça y est, ma première vague d'essais est enfin finalisée (ouf !)
-> Du coup, j'en profite, pour te faire un petit compte-rendu vite fait / à tes propositions :
*One: Ta 1ère proposition tient super-bien la route car, en plus, elle me permet d'envisager d'utiliser l'effet d'agrandissement d'image pour mon projet du moment... Y a seulement à vérifier (Si on part d'un essai sur une page HTML) qu'on a bien le Doctype qui va bien (pour que ça passe bien aussi sur Internet explorer)

j'ai récupéré le code suivant sur le code source de la page test proposée (lien "demo") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Et... ça marche nickel... Wouah !!!

*Two: Pour ta 2ème proposition, intéressant disais-je, sauf que là, pas possibilité de récupérer vraiment les dimensions de l'image !
*Tree: La 3ème donne fonctionne très bien, même si, pour moi, elle ne représente pas les mêmes avantages que la 1ère

Merci à toi !!!

(Rézolu !)

[XSLT] Intégration automatique des dimensions d'une image

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager