| Alain Barraud | Mémento informatique |
Page ouverte le 20/06/2009
JavaScript - L'objet "Image"
L'objet
Il s'utilise en trois temps :
Image permet de pré-charger une image (la télécharger, mais sans l'afficher) et d'en connaître les dimensions, et ceci avant de l'afficher sur la page !Il s'utilise en trois temps :
- On commence par créer une instance de l'objet
Image:Code : JavaScript1 var monImage = new Image(); - Ensuite, on crée des fonctions qu'on associe aux différents évènements (tel que "chargement terminé") :
Code : JavaScript1 // quand le chargement est terminé
2 monImage.onload = function()
3 {
4 alert("Chargement fini !");
5 } - Enfin, on indique l'adresse de l'image à l'aide de l'attribut
src, ce qui aura pour effet de lancer son chargement :Code : JavaScript1 monImage.src = "http://www.mon-site.com/une-image.png";
Retour accueil JS
Sommaire
Sommaire
Evènements
onLoad: une fois le chargement de l'image terminéonError: lorsqu'une erreur se produit lors du chargementonAbort: lors de l'abandon du chargement
Attributs
src: adresse de l'imagewidthetheight: taille de l'imagecomplete: indique si l'image est totalement chargée (true) ou non (false)
Exemples d'utilisation
On fera
chargerImage(img, src, maxWidth, maxHeight)pour charger une image et l'afficher à la place d'une autre, en indiquant une taille maximale.
Evénements
 |
Rappel : en JS, les événements sont entièrement en minuscules. Cependant, lorsqu'on les nomme, on utilise parfois une majuscule (comme dans ce chapitre) pour bien séparer le on du nom de l'événement. |
onLoad
Cet événement se produit une fois que l'image est entièrement chargée.
onError
Cet événement se produit si l'image ne peut pas être chargée (en particulier lorsqu'elle n'existe pas).
onAbort
Cet événement se produit lorsque le chargement est interrompu.
Exemple
Pour illustrer ceci, chargeons une image et affichons un message une fois le chargement terminé.
On va regrouper
On va regrouper
onError et onAbort, qui concernent tous les deux un chargement impossible.Code : JavaScript
1 // on crée l'objet
2 var image = new Image();
3
4 // une fois le chargement terminé
5 image.onload = function()
6 {
7 alert("Chargement fini");
8 }
9
10 // cas d'erreur
11 image.onerror =
12 image.onabort = function()
13 {
14 alert("Erreur lors du chargement");
15 }
16
17 // on modifie l'adresse de l'objet "image", ce qui lance le chargement
18 image.src = "http://www.mon-site.com/une-image.png";
2 var image = new Image();
3
4 // une fois le chargement terminé
5 image.onload = function()
6 {
7 alert("Chargement fini");
8 }
9
10 // cas d'erreur
11 image.onerror =
12 image.onabort = function()
13 {
14 alert("Erreur lors du chargement");
15 }
16
17 // on modifie l'adresse de l'objet "image", ce qui lance le chargement
18 image.src = "http://www.mon-site.com/une-image.png";
Attributs
src
Description
Désigne l'adresse (l'url) de l'image.
On peut :
On peut :
- la modifier, pour lancer le chargement de l'image (dont on vient de donner l'adresse)
- la lire, par exemple pour récupérer l'adresse une fois le chargement terminé, et ainsi l'utiliser.
Exemple
On va charger une image, puis l'afficher sur la page (à la place d'une autre image) une fois le chargement terminé.
Voici une image sur la page :
Le script :
Noter qu'on utilise deux fois l'attribut
Voici une image sur la page :
Code : HTML
1 <img
src="toto.png" alt="" id="uneImage" />
Le script :
Code : JavaScript
1 var image = new Image();
2
3 // une fois le chargement terminé : on affiche l'image à la place de l'autre
4 image.onload = function()
5 {
6 documentgetElementById("uneImage").src = image.src;
7 }
8
9 // on lance le chargement
10 image.src = "bob.png";
2
3 // une fois le chargement terminé : on affiche l'image à la place de l'autre
4 image.onload = function()
5 {
6 documentgetElementById("uneImage").src = image.src;
7 }
8
9 // on lance le chargement
10 image.src = "bob.png";
Noter qu'on utilise deux fois l'attribut
src :
- on le modifie (ligne 10) pour lancer le chargement
- on le lit (ligne 6) à la fin du chargement, pour le copier dans l'attribut
srcde l'image qu'on veut modifier sur notre page.
width et height
Description
Permettent de connaître les dimensions de l'image chargée.
|
Il faut attendre que l'image soit complètement chargée pour lire ses dimensions. Dans le cas contraire, on aura un résultat erroné. |
Exemple
On va demander à l'utilisateur l'adresse d'une image, puis en afficher les dimensions.
Code : JavaScript
1 var image = new Image();
2
3 image.onerror =
4 image.onabort = function()
5 {
6 alert("Impossible de charger l'image");
7 }
8 image.onload = function()
9 {
10 alert("Dimensions de l'image : " + image.width + d"*" + image.height);
11 }
12
13// on lance le chargement
14 image.src = prompt("Entrez l'adresse de l'image dont vous voulez les dimensions");
2
3 image.onerror =
4 image.onabort = function()
5 {
6 alert("Impossible de charger l'image");
7 }
8 image.onload = function()
9 {
10 alert("Dimensions de l'image : " + image.width + d"*" + image.height);
11 }
12
13// on lance le chargement
14 image.src = prompt("Entrez l'adresse de l'image dont vous voulez les dimensions");
complete
Description
Cet attribut vaut
true si l'image est entièrement chargée, false sinon.
Exemples d'utilisation
Changer une image de la page
Pour illustrer le fonctionnement de l'objet
Son but est de charger l'image dont on a précisé l'adresse via
Une fois cette image chargée, on l'affichera dans l'image
On va rendre les deux derniers arguments facultatifs : ils serviront à redimensionner l'image si elle est trop grande (si sa largeur est plus grande que
Image, créons une fonction changerImage(img, src, maxWidth, maxHeight).Son but est de charger l'image dont on a précisé l'adresse via
src.Une fois cette image chargée, on l'affichera dans l'image
img (qu'on pourra désigner soit directement, this par exemple, soit par son id).On va rendre les deux derniers arguments facultatifs : ils serviront à redimensionner l'image si elle est trop grande (si sa largeur est plus grande que
maxWidth ou sa hauteur plus grande que maxHeight).
Le squelette
Le squelette de notre programme est simple : voici une fonction basique prenant deux paramètres, qui charge une image, puis l'affiche.
Pour les explications, voir les parties concernées dans ce chapitre.
On peut déjà utiliser cette fonction comme ceci :
Pour les explications, voir les parties concernées dans ce chapitre.
Code : JavaScript
1 function changerImage(img, src)
2 {
3 // on crée l'objet
4 var image = new Image();
5
6 // événements : cas d'erreur
7 image.onerror = function()
8 {
9 alert("Erreur lors du chargement de l'image");
10 }
11 image.onabort = function()
12 {
13 alert("Chargement interrompu");
14 }
15
16 // événement : une fois le chargement terminé
17 image.onload = function()
18 {
19 img.src = image.src;
20 img.width = image.width;
21 img.height = image.height;
22 }
23
24 // on modifie l'adresse de l'objet "image", ce qui lance le chargement
25 image.src = src;
26 }
2 {
3 // on crée l'objet
4 var image = new Image();
5
6 // événements : cas d'erreur
7 image.onerror = function()
8 {
9 alert("Erreur lors du chargement de l'image");
10 }
11 image.onabort = function()
12 {
13 alert("Chargement interrompu");
14 }
15
16 // événement : une fois le chargement terminé
17 image.onload = function()
18 {
19 img.src = image.src;
20 img.width = image.width;
21 img.height = image.height;
22 }
23
24 // on modifie l'adresse de l'objet "image", ce qui lance le chargement
25 image.src = src;
26 }
On peut déjà utiliser cette fonction comme ceci :
Code : JavaScript
1 changerImage(document.getElementById("monImage"), "nouvelleImage.png");
Pouvoir désigner l'image par son id
Ne pensez-vous pas qu'il serait agréable de pouvoir appeler notre fonction soit comme ci-dessus (avec
Pour savoir si le paramètre est l'id ou l'image, il suffit de regarder son type : si c'est une chaîne de caractères, alors on utilise
Pour connaître le type de donnée que contient une variable, on peut utiliser
Il nous reste donc à rajouter ce test au début de la fonction associée à
getElementById), soit en utilisant directement l'id de l'image, comme ci-dessous ?
Code : JavaScript
1 // première possibilité : en passant par getElementById
2 var monImage = document.getElementById("monImage");
3 changerImage(monImage, "nouvelleImage.png");
4
5 // deuxième possibilité : en indiquant simplement l'id
6 changerImage("monImage", "nouvelleImage.png");
2 var monImage = document.getElementById("monImage");
3 changerImage(monImage, "nouvelleImage.png");
4
5 // deuxième possibilité : en indiquant simplement l'id
6 changerImage("monImage", "nouvelleImage.png");
Pour savoir si le paramètre est l'id ou l'image, il suffit de regarder son type : si c'est une chaîne de caractères, alors on utilise
getElementById pour récupérer l'image elle-même ; sinon, il s'agit de l'image, et on l'utilise directement.Pour connaître le type de donnée que contient une variable, on peut utiliser
typeof, qui renvoie le nom du type sous forme de chaîne de caractères.Il nous reste donc à rajouter ce test au début de la fonction associée à
onload pour pouvoir utiliser indifféremment l'id ou l'objet :
Code : JavaScript
1 if(typeof img == "string")
2 img = document.getElementById(img);
2 img = document.getElementById(img);
Redimensionner l'image si elle est trop grande
Il peut être pratique de limiter la taille d'affichage d'une image (pour afficher une miniature dans un diaporama, pour qu'une image trop grande soit affichée dans une taille raisonnable, etc.).
C'est pour cela que nous allons ajouter à notre fonction deux arguments facultatifs,
Un exemple : si on a une image de 600 * 450, mais que la taille maximale est 200 * 200, il va falloir diviser la taille par 3 : la nouvelle taille sera donc 200 * 150, qui respectera bien la taille limite.
Dans cet exemple, 3 est appelé le coefficient de réduction.
On peut d'ores et déjà écrire le début du code, qui concerne le cas où l'image n'est pas redimensionnée : soit parce qu'aucune taille maximale n'a été précisée, soit parce que les dimensions de l'image sont inférieures aux dimensions maximales.
Le coefficient de réduction est le nombre par lequel il faut diviser les dimensions de l'image.
Le coefficient est donc :
De cette manière, on trouve deux valeurs pour notre coefficient : une pour la largeur, et une pour la hauteur.
Dans notre exemple, pour l'image de 600 * 450 qu'on veut limiter à 200 * 200, on a :
Il faut donc prendre le plus grand de nos deux coefficients (c'est 3 dans notre exemple), pour que l'image ne dépasse pas les dimensions maximales.
Ensuite, pour calculer les nouvelles dimensions, il ne reste qu'à diviser les dimensions de l'image par ce coefficient, sans oublier d'arrondir les valeurs obtenues.
Voici donc la partie de notre fonction qui se chargera d'afficher l'image réduite :
Sans oublier de rajouter les deux arguments supplémentaires au début de la fonction…
C'est pour cela que nous allons ajouter à notre fonction deux arguments facultatifs,
maxWidth et maxHeight, pour limiter respectivement la largeur et la hauteur de l'image.
|
Si l'image est trop grande, il va falloir calculer la nouvelle taille de façon à ce qu'elle ne soit pas déformée. |
Dans cet exemple, 3 est appelé le coefficient de réduction.
On peut d'ores et déjà écrire le début du code, qui concerne le cas où l'image n'est pas redimensionnée : soit parce qu'aucune taille maximale n'a été précisée, soit parce que les dimensions de l'image sont inférieures aux dimensions maximales.
Code : JavaScript
1 // coefficient de réduction : par défaut à 1
2 var reduction = 1;
3 if(maxWidth && maxHeight)
4 if(image.width > maxWidth || image.height > maxHeight)
5 {
6 // si les dimensions maximales sont précisées et que l'image est trop grande
7 reduction = …;// reste à le calculer
8 }
2 var reduction = 1;
3 if(maxWidth && maxHeight)
4 if(image.width > maxWidth || image.height > maxHeight)
5 {
6 // si les dimensions maximales sont précisées et que l'image est trop grande
7 reduction = …;// reste à le calculer
8 }
 |
Comment calculer le coefficient de réduction ? |
Code : Autre
1 Nouvelle taille = Ancienne taille / Coefficient
Le coefficient est donc :
Code : Autre
1 Coefficient = Ancienne taille / Nouvelle taille = Taille de l'image / Taille maximale
De cette manière, on trouve deux valeurs pour notre coefficient : une pour la largeur, et une pour la hauteur.
Dans notre exemple, pour l'image de 600 * 450 qu'on veut limiter à 200 * 200, on a :
Code : Autre
1 Coef. largeur = 600 / 200 = 3
2 Coef. hauteur = 450 / 200 = 2.25
2 Coef. hauteur = 450 / 200 = 2.25
|
Pour que l'image ne soit pas déformée, il faut utiliser le même coefficient pour la largeur et pour la hauteur. |
Il faut donc prendre le plus grand de nos deux coefficients (c'est 3 dans notre exemple), pour que l'image ne dépasse pas les dimensions maximales.
Code : JavaScript
1 reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
Ensuite, pour calculer les nouvelles dimensions, il ne reste qu'à diviser les dimensions de l'image par ce coefficient, sans oublier d'arrondir les valeurs obtenues.
Voici donc la partie de notre fonction qui se chargera d'afficher l'image réduite :
Code : JavaScript
1 image.onload = function()
2 {
3 // si l'image est trop grande
4 var reduction = 1;
5 if(maxWidth && maxHeight)
6 if(image.width > maxWidth || image.height > maxHeight);
7 reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
8
9 // on affiche enfin l'image
10 img.src = image.src;
11 img.width = Math.round(image.width / reduction);
12 img.height = Math.round(image.height / reduction);
13 }
2 {
3 // si l'image est trop grande
4 var reduction = 1;
5 if(maxWidth && maxHeight)
6 if(image.width > maxWidth || image.height > maxHeight);
7 reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
8
9 // on affiche enfin l'image
10 img.src = image.src;
11 img.width = Math.round(image.width / reduction);
12 img.height = Math.round(image.height / reduction);
13 }
Sans oublier de rajouter les deux arguments supplémentaires au début de la fonction…
Fonction finale
Voici donc notre fonction prête à l'emploi.
L'utilisation de l'objet
En revanche, pour les images présentes dès le chargement de la page, son utilisation est superflue.
Code : JavaScript
1 function changerImage(img, src, maxWidth, maxHeight)
2 {
3 var image = new Image();
4
5 image.onerror = function()
6 {
7 alert("Erreur lors du chargement de l'image");
8 }
9
10 image.onabort = function()
11 {
12 alert("Chargement interrompu");
13 }
14
15 // une fois l'image chargée :
16 image.onload = function()
17 {
18 // si l'image est désignée par son id
19 if(typeof img == "string")
20 img = document.getElementById(img);
21
22 // si l'image doit être redimensionnée
23 var reduction = 1;
24 if(maxWidth && maxHeight)
25 if(image.width > mawWidth || image.height > maxHeight);
26 reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
27
28 // on affiche l'image
29 img.src = image.src;
30 img.width = Math.round(image.width / reduction);
31 img.height = Math.round(image.height / reduction);
32 }
33
34 image.src = src;
35 }
2 {
3 var image = new Image();
4
5 image.onerror = function()
6 {
7 alert("Erreur lors du chargement de l'image");
8 }
9
10 image.onabort = function()
11 {
12 alert("Chargement interrompu");
13 }
14
15 // une fois l'image chargée :
16 image.onload = function()
17 {
18 // si l'image est désignée par son id
19 if(typeof img == "string")
20 img = document.getElementById(img);
21
22 // si l'image doit être redimensionnée
23 var reduction = 1;
24 if(maxWidth && maxHeight)
25 if(image.width > mawWidth || image.height > maxHeight);
26 reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
27
28 // on affiche l'image
29 img.src = image.src;
30 img.width = Math.round(image.width / reduction);
31 img.height = Math.round(image.height / reduction);
32 }
33
34 image.src = src;
35 }
|
On peut gérer très précisément le chargement des images à l'aide du JS. Mais attention à ne pas en abuser ! |
L'utilisation de l'objet
Image est parfaitement justifiée dans un diaporama.En revanche, pour les images présentes dès le chargement de la page, son utilisation est superflue.