Comment redimensionner l'image à l'aide de toile HTML en javascript

En JavaScript, le redimensionnement d'images joue un rôle important dans la rendez-vous plus interactif de la page Web. En redimensionnement, les images peuvent être placées à n'importe quel endroit souhaité sur une page Web. À cette fin, le HTML L'élément fournit une fonctionnalité de Redimensionner des images avec l'intégration du code javascript. Cet élément est applicable aux graphiques de dessin, y compris l'animation, le tracé des graphiques et bien d'autres. De plus, les utilisateurs peuvent spécifier les dimensions de l'image redimensionnée. L'article montre comment redimensionner une image à l'aide de la toile HTML via JavaScript.

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

Le html L'élément est utilisé pour dessiner des graphiques dans différents aspects. Il est utile pour l'animation, tracer des graphiques et combiner des photos. De plus, les utilisateurs peuvent redimensionner l'image en fournissant des dimensions spécifiques. Il ne change pas l'image d'origine mais crée une nouvelle image recadrée ou redimensionnée. À cet effet, le drawImage () La méthode est utilisée pour mettre à l'échelle l'image dans les éléments de toile.

La mise en œuvre pratique de la redimensionnement de l'image est divisée en deux fichiers distincts, i.e., HTML et JavaScript.

Code HTML

"https: // cdn.pixabay.com / Photo / 2020/02/26/08/59 / Fireworks-4881190__340.jpg "
>

La description du code est fournie ici:

• Tout d'abord, une URL d'image est fournie en spécifiant la largeur et la hauteur Mots clés.
• Après cela, HTML est ajusté en redimensionné le largeur et hauteur de l'image.
• En fin de compte, un javascript «test.js»Est lié en fournissant la source.

Code javascript

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

Dans ce code JavaScript:

• Premièrement, le «fenêtre.en charge»L'événement est utilisé pour vérifier si la page Web est prête à afficher.
• Après cela, getElementbyid La propriété est employée pour extraire l'image et les ID de toile par «feu" et "peut".
• Après cela, le getContext () La méthode est utilisée pour montrer le dessin sur toile en passant un «2d" surface.
• En fin de compte, le drawImage () La méthode est utilisée pour dessiner une nouvelle image. De plus, X et y Les coordonnées sont spécifiées comme «dix" et "dix”Pour placer l'image sur la toile.

Sortir

La sortie montre que l'image complète est redimensionnée en appliquant le drawImage () Méthode dans le HTML . La partie droite de l'affichage ci-dessus représente la partie redimensionnée de l'image.

Conclusion

JavaScript fournit un drawImage () Méthode pour redimensionner l'image en utilisant le HTML . La méthode prend l'entrée en tant que hauteurs et largeurs de l'image existante. Après cela, un facteur de redimensionnement est appliqué pour dessiner une nouvelle image basée sur les hauteurs et les largeurs fournies. De plus, les utilisateurs peuvent spécifier les images Web pour le redimensionnement via JavaScript. Dans cet article, les utilisateurs ont appris à redimensionner l'image basée sur HTML . Il dispose de diverses applications dans les magasins de magasinage en ligne, les sites de jeu, etc.