Comment recadrer 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.