Redimensionner l'image à l'aide de HTML Canvas en JavaScript

Les graphiques sont utilisés pour décrire les aspects des images qui constituent une partie importante de toute application Web. HTML offre deux manières de créer des graphiques. Le premier est toile et l’autre est SVG. Dans l’article d’aujourd’hui, nous allons apprendre à créer des graphiques, en particulier comment dessiner une image en HTML avec canvas et JavaScript.

Redimensionner les images par canvas en HTML à l’aide de JavaScript

Canvas est un élément HTML standard utilisé pour dessiner des graphiques dans des applications Web. Ce n’est rien de plus qu’une zone rectangulaire sur la page sans bordure ni contenu. Les utilisateurs peuvent utiliser cette zone rectangulaire pour dessiner des graphiques.

Les graphiques rendus sur le canevas sont différents des styles HTML et CSS normaux. L’ensemble du canevas avec tous les graphiques qu’il contient est traité comme un seul élément DOM.

Méthodes de canvas en HTML

1. getContext() : il s’agit d’une méthode intégrée fournie par canvas qui renvoie le contexte de dessin sur le canevas en fonction du contextType. Si l’identifiant de contexte n’est pas supporté ou est déjà configuré, null est retourné. Les types de contexte pris en charge sont 2d, webgl, webgl2 et bitmaprenderer.
2. drawImage() : il s’agit d’une méthode intégrée fournie par canvas qui permet de dessiner l’image sur le canevas de différentes manières.

Syntaxe de drawImage()

context.drawImage(
    $image, $sx, $sy, $sWidth, $sHeight, $dx, $dy, $dWidth, $dHeight);

Paramètres

• $image : C’est un paramètre obligatoire qui spécifie la source de l’image qui doit être dessinée dans le canevas. La source de l’image peut être n’importe quoi comme CSSImageValue, HTMLImageElement, SVGImageElement, etc.
• $sx : C’est un paramètre optionnel qui spécifie le X ou la coordonnée horizontale de l’image source. Il sera mesuré comme un rectangle à partir du coin supérieur gauche pour dessiner dans l’image de destination.
• $sy : C’est un paramètre optionnel qui précise le Y ou coordonnée verticale de l’image source. Il sera mesuré comme un rectangle à partir du coin supérieur gauche pour dessiner dans l’image de destination.
• $sWidth : C’est un paramètre optionnel qui spécifie la largeur de l’image source. Il sera mesuré comme un rectangle à partir du coin supérieur gauche pour dessiner dans l’image de destination.
• $sHeight : C’est un paramètre optionnel qui spécifie la hauteur de l’image source. Il sera mesuré comme un rectangle à partir du coin supérieur gauche pour dessiner dans l’image de destination.
• $dx : C’est un paramètre obligatoire qui précise la coordonnée X ou horizontale de l’image de destination. Il sera mesuré comme un rectangle à partir du coin supérieur gauche où l’image source est placée.
• $dy : C’est un paramètre obligatoire qui précise le Y ou coordonnée verticale de l’image de destination. Il sera mesuré comme un rectangle à partir du coin supérieur gauche où l’image source est placée.
• $dWidth : C’est un paramètre facultatif qui spécifie la largeur de l’image de destination. Il sera mesuré comme un rectangle à partir du coin supérieur gauche. Si aucune valeur n’est spécifiée, la largeur par défaut est la largeur de l’image source.
• $dHeight : C’est un paramètre optionnel qui précise la hauteur de l’image de destination. Il sera mesuré comme un rectangle à partir du coin supérieur gauche. Si elle n’est pas spécifiée, la hauteur par défaut est la hauteur de l’image source.

Étapes pour redimensionner une image à l’aide de JavaScript Canvas

Exemple de code :

<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2" width="500" height="400">
<canvas id="canvas" width=1000></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src =
    'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2';

img.onload = function() {
  // set height proportional to destination image
  canvas.height = canvas.width * (img.height / img.width);
  // step 1 - resize to 75%
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  // Set the width & height to 75% of image
  oc.width = img.width * 0.75;
  oc.height = img.height * 0.75;
  // step 2, resize to temporary size
  octx.drawImage(img, 0, 0, oc.width, oc.height);
  // step 3, resize to final size
  ctx.drawImage(
      oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width,
      canvas.height);
}

Production :