• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

L'objet "Image"

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Mesdames et messieurs, voici maintenant l'objet Image.
Il va nous permettre 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 évidemment par créer une instance de l'objet Image :

    var monImage = new Image();
  • Ensuite, on crée des fonctions qu'on associe aux différents évènements (tel que "chargement terminé") :

    // quand le chargement est terminé
    monImage.onload = function()
    {
       alert("Chargement fini !");
    }
  • Enfin, on indique l'adresse de l'image à l'aide de l'attribut src, ce qui aura pour effet de lancer son chargement :

    monImage.src = "http://www.mon-site.com/une-image.png";

Sommaire

Évènements
  • onLoad : une fois le chargement de l'image terminé

  • onError : lorsqu'une erreur se produit lors du chargement

  • onAbort : lors de l'abandon du chargement

Attributs
  • src : adresse de l'image

  • width et height : taille de l'image

  • complete : indique si l'image est totalement chargée (true) ou non (false)

Exemples d'utilisation

Nous allons faire...

  • chargerImage(img, src, maxWidth, maxHeight) pour charger une image et l'afficher à la place d'une autre, en indiquant une taille maximale.

Événements

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 onError et onAbort, qui concernent tous les deux un chargement impossible.

// on crée l'objet
var image = new Image();
 
// une fois le chargement terminé
image.onload = function()
{
   alert("Chargement fini");
}
 
// cas d'erreur
image.onerror =
image.onabort = function()
{
   alert("Erreur lors du chargement");
}
 
// on modifie l'adresse de l'objet "image", ce qui lance le chargement
image.src = "http://www.mon-site.com/une-image.png";

Attributs

src

Description

Désigne l'adresse (l'url) de l'image.
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 :

<img src="toto.png" alt="" id="uneImage" />

Et voici notre script :

var image = new Image();
 
// une fois le chargement terminé : on affiche l'image à la place de l'autre
image.onload = function()
{
   document.getElementById("uneImage").src = image.src;
}
 
// on lance le chargement
image.src = "bob.png";

Notez 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 src de l'image qu'on veut modifier sur notre page.

width et height

Description

Permettent de connaître les dimensions de l'image chargée.

Exemple

On va demander à l'utilisateur l'adresse d'une image, puis en afficher les dimensions.

var image = new Image();
 
image.onerror =
image.onabort = function()
{
   alert("Impossible de charger l'image");
}
image.onload = function()
{
   alert("Dimensions de l'image : " + image.width + "*" + image.height);
}
 
// on lance le chargement
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 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, je vous renvoie aux parties concernées dans ce chapitre.

function changerImage(img, src)
{
   // on crée l'objet
   var image = new Image();
 
   // événements : cas d'erreur
   image.onerror = function()
   {
      alert("Erreur lors du chargement de l'image");
   }
   image.onabort = function()
   {
      alert("Chargement interrompu");
   }
 
   // événement : une fois le chargement terminé
   image.onload = function()
   {
      img.src = image.src;
      img.width = image.width;
      img.height = image.height;
   }
 
   // on modifie l'adresse de l'objet "image", ce qui lance le chargement
   image.src = src;            
}

On peut déjà utiliser cette fonction comme ceci :

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 getElementById), soit en utilisant directement l'id de l'image, comme ci-dessous ?

// première possibilité : en passant par getElementById
var monImage = document.getElementById("monImage");
changerImage(monImage, "nouvelleImage.png");
 
// deuxième possibilité : en indiquant simplement l'id
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 :

if(typeof img == "string")
   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, maxWidth et maxHeight, pour limiter respectivement la largeur et la hauteur de l'image.

Un exemple : si vous avez 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.

// coefficient de réduction : par défaut à 1
var reduction = 1;
if(maxWidth && maxHeight)
   if(image.width > maxWidth || image.height > maxHeight)
   {
      // si les dimensions maximales sont précisées et que l'image est trop grande
      reduction = ...; // reste à le calculer ;)
   }

Comment calculer le coefficient de réduction ?

Le coefficient de réduction est le nombre par lequel il faut diviser les dimensions de l'image.

Nouvelle taille  =  Ancienne taille / Coefficient

Le coefficient est donc :

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 :

Coef. largeur = 600 / 200 = 3
Coef. hauteur = 450 / 200 = 2.25

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.

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 :

image.onload = function()
{
   // si l'image est trop grande
   var reduction = 1;
   if(maxWidth && maxHeight)
      if(image.width > maxWidth || image.height > maxHeight)
         reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
 
   // on affiche enfin l'image
   img.src = image.src;
   img.width = Math.round(image.width / reduction);
   img.height = Math.round(image.height / reduction);
}

Sans oublier de rajouter les deux arguments supplémentaires au début de notre fonction...

Fonction finale

Si on recolle tous les morceaux, voici donc notre fonction prête à l'emploi.

function changerImage(img, src, maxWidth, maxHeight)
{
   var image = new Image();
 
   image.onerror = function()
   {
      alert("Erreur lors du chargement de l'image");
   }
 
   image.onabort = function()
   {
      alert("Chargement interrompu");
   }
 
   // une fois l'image chargée :
   image.onload = function()
   {
      // si l'image est désignée par son id
      if(typeof img == "string")
         img = document.getElementById(img);
 
      // si l'image doit être redimensionnée
      var reduction = 1;
      if(maxWidth && maxHeight)
         if(image.width > maxWidth || image.height > maxHeight)
            reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
 
      // on affiche l'image
      img.src = image.src;
      img.width = Math.round(image.width / reduction);
      img.height = Math.round(image.height / reduction);
   }
 
   image.src = src;
}

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.

Exemple de certificat de réussite
Exemple de certificat de réussite