Comment recadrer une image en JavaScript à l'aide de toile HTML

L'élément HTML Canvas est célèbre pour effectuer des manipulations avec des images. Il peut effectuer diverses fonctionnalités liées à des images, comme le recadrage, le redimensionnement, le zoom dans, le zoom arrière, etc. Croping Une image est essentielle pour éliminer les parties inutiles d'une image. Par exemple, JavaScript fournit des fonctionnalités intégrées par le drawImage () Méthode pour recadrer une image et l'afficher dans un élément de toile. Cet article démontre la mise en œuvre pratique de la recadrage d'une image en JavaScript à l'aide de toile HTML.

Comment recadrer une image en JavaScript à l'aide de toile HTML?

La toile est un domaine vide dans lequel l'utilisateur peut effectuer n'importe quelle tâche concernant l'image. JavaScript fournit le drawImage () Méthode pour recadrer une image. La méthode est utilisée pour mettre à l'échelle une image en éléments de toile. Cette méthode fonctionne de la même manière que rectangulaire en spécifiant la taille et l'emplacement de l'image.

La syntaxe de la méthode DrawImage () est fournie ci-dessous:

Syntaxe

DrawImage (IMG, SRC_X, SY, SWID, SHEI, DX, DY, DWID, DHEI);

Les paramètres sont expliqués comme ci-dessous:

Description des paramètres

IMG	Spécifie l'image (via la balise) à recadorder et affiché dans le navigateur.
src_x	Spécifie le début du recadrage de l'image source de l'axe X.
src_y	Indique le début du recadrage de l'image source de l'axe y.
secouer	Identifie la largeur de l'image.
elle je	Représente la hauteur de l'image.
dx	Spécifie le point démarré de l'axe X pour le dessin.
dy	Spécifie le point démarré de l'axe y pour le dessin.
méchanceté	Représente la largeur de l'image à afficher.
dhei	Représente la hauteur de l'image à afficher.

Laissez-nous pratiquer la méthode DrawImage () pour recadrer une image à l'aide de toile HTML en JavaScript.

Exemple

Un exemple est considéré comme recadrer une image en JavaScript en utilisant la toile HTML. L'exemple se compose de sections de code HTML et JavaScript. Ces sections sont discutées comme suit.

Code HTML

"https: // cdn.pixabay.com / Photo / 2022/08/15/12/47 / Moth-7387787__340.jpg ">

La description du code est la suivante:

• Un La balise est utilisée en spécifiant les dimensions contenant largeur et hauteur.
• UN URL d'une image Web est affectée à SRC.
• Après cela, l'élément HTML Canvas est utilisé pour afficher l'image recadrée dans le navigateur.
• En fin de compte, le fichier javascript test.js est lié à l'intérieurMots clés.

Code javascript

fenêtre.onload = function ()
var img = document.getElementByid ("fleur");
var toile = document.getElementById ("can_id");
Var Context = toile.getContext ("2d");
contexte.DrawImage (IMG, 10, 10);
;

Dans ce code:

• Premièrement, le «fenêtre.en charge»L'événement est utilisé pour vérifier si la page Web est prête à afficher.
• De plus, le getElementbyid La propriété est utilisée pour extraire l'image et l'identifiant de toile par «fleur" et "Can_id".
• Après cela, le getContext () La méthode est utilisée pour montrer le dessin sur toile comme un «2d" surface.
• Finalement, le drawImage () La méthode est utilisée pour dessiner une nouvelle image. De plus, X et y coordonnées sont passés comme «dix" et "dix”Pour le placement de l'image sur la toile.

Sortir

La sortie montre que l'image complète est redimensionnée en appliquant le drawImage () Méthode dans la fenêtre du navigateur.

Conclusion

En javascript, le drawImage () La méthode est utilisée avec trois arguments pour recadrer une image en utilisant l'élément de toile HTML. La méthode accepte une variété d'arguments, mais seul le Référence d'image, hauteur, et largeur sont utilisés pour recadrer une image. Le getElementbyid joue également un rôle clé dans la récupération de l'élément d'image. Cet article montre diverses méthodes pour recadrer une image en JavaScript à l'aide de toile HTML.