Recadrer une image en JavaScript à l'aide de HTML Canvas
Pour recadrer une image en JavaScript, on peut se servir de l’élément HTML canvas. L’élément canvas est disponible en HTML5. Pour afficher et recadrer l’image sur le canevas, nous pouvons utiliser la fonction drawImage(). La fonction drawImage() prend un minimum de trois paramètres et un maximum de neuf paramètres.
Il y a ce qu’on appelle un contexte à l’aide duquel on peut dessiner n’importe quoi sur toile. Vous pouvez le considérer comme un stylo avec lequel vous pouvez dessiner sur la toile. Le context nous fournit une méthode appelée drawImage() qui dessine le contenu à l’écran. Voyons maintenant le processus étape par étape pour recadrer une image en JavaScript.
Recadrer une image en JavaScript à l’aide de l’élément canvas HTML5
Un canvas en HTML 5 n’est rien d’autre qu’une zone vide à l’intérieur de laquelle nous pouvons dessiner tout ce que nous voulons. Pour ajouter un canvas à l’intérieur du code HTML, on peut utiliser une balise canvas avec un identifiant de canvas, et à cet élément canvas, on peut aussi spécifier ses dimensions (dans ce cas, largeur : 1000px et hauteur : 500px) comme suit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
A la fin de la balise body, nous avons lié notre fichier script à l’intérieur duquel nous allons écrire notre code JavaScript.
Dans notre JavaScript, nous avons créé une fonction appelée cropImg() . Dans cette fonction, nous obtenons l’élément HTML canvas en utilisant document.getElementById() et le stockons dans la variable canvas. Puisque nous voulons dessiner une image sur ce canevas, qui est une image en deux dimensions, nous allons d’abord obtenir le contexte de notre élément canvas en utilisant la fonction getContext(), et en argument de cette fonction, nous passerons 2d. Et pour stocker ce contexte, nous avons créé une autre variable appelée ctx.
Pour en savoir plus sur la fonction getContext() et ses propriétés, vous pouvez visiter et lire les MDN docs. À ce stade, voici à quoi ressemble notre code.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
Maintenant que le canevas est configuré et que le contexte ctx est prêt, nous pouvons commencer à recadrer et à dessiner l’image.
Créons maintenant une balise d’image à l’aide du constructeur Image() et stockons-la dans une variable image. Ensuite, nous pouvons lier une image à l’image en utilisant la propriété src. Pour ce didacticiel, nous prendrons l’URL d’une image sur Internet (Unsplash.com), puis l’ajouterons à la propriété source sous la forme d’une chaîne illustrée ci-dessous.
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
Pour recadrer et dessiner l’image sur la toile, nous devons nous assurer que notre image est déjà complètement chargée. Pour cela, nous pouvons utiliser la fonction onload sur l’image. Le code écrit à l’intérieur de cette fonction ne sera exécuté qu’une fois l’image complètement chargée.
Comme nous l’avons vu précédemment dans cet article, le contexte nous fournit une fonction appelée drawImage() pour dessiner des images sur le canevas. Nous devons transmettre certaines entrées à cette fonction en fonction de l’apparence que nous voulons donner à l’image finale. Puisque nous voulons recadrer une image, nous voulons afficher uniquement une partie spécifique de cette image sur le navigateur et exclure le reste, nous devons passer 9 paramètres à la fonction drawImage(). Et les paramètres sont les suivants.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Paramètres:
image- L’image elle-même que nous voulons recadrer et afficher sur le navigateur.sx(axe des x de l’image source) - Ce paramètre indique d’où vous voulez couper ou commencer à recadrer l’image à partir de l’axe des x.sy(axe des y de l’image source) - Ce paramètre indique d’où vous voulez couper ou commencer à recadrer l’image à partir de l’axe des y.sWidth- La largeur de l’image à partir de sx.sHeight- La hauteur de l’image à partir de sy.dx- Le point à partir duquel commencer à dessiner l’image sur l’écran à partir de l’axe des x.dy- Le point à partir duquel commencer à dessiner l’image sur l’écran à partir de l’axe des y.dWidth- La longueur des images qui doivent être affichées à l’écran.dHeight- La hauteur des images qui doivent être affichées à l’écran.
L’image ci-dessous illustre les paramètres sx, sy et sWidth utilisés pour recadrer ou découper l’image.
Après avoir découpé l’image, pour l’afficher dans la fenêtre du navigateur, nous utilisons les paramètres dx, dy, dWidth et dHeight.
Vous pouvez maintenant passer des paramètres à cette fonction en fonction de la manière et de l’endroit où vous souhaitez afficher l’image. Dans cet exemple, nous avons passé image, 150, 200, 500, 300, 60,60, 500, 300 ces neuf valeurs à notre fonction drawImage(). Vous pouvez modifier ces valeurs en fonction de la sortie souhaitée que vous souhaitez. En fin de compte, votre code ressemblera à quelque chose comme ça. N’oubliez pas d’appeler la fonction cropImg() dans votre code.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
image.onload = function() {
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);
}
}
cropImg();
Il s’agit de toute la procédure pour recadrer une image en JavaScript à l’aide de l’élément de toile HTML 5. C’est l’approche la plus populaire et la plus utilisée lorsqu’il s’agit de recadrer une image en JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn