Short video - Créer un captcha à l'aide de l'API Canvas

21 Dec 2022 · 2 min

Watch on YouTube

1:58

Dans cette courte vidéo, le présentateur montre comment ajouter du texte à des images générées dynamiquement avec l'API Canvas 2D en JavaScript. Après avoir rappelé la création du contexte de rendu 2D, il explique la définition des couleurs de remplissage (rouge) et de contour (noir) ainsi que l'épaisseur du trait (2 px). Il introduit ensuite les deux méthodes principales pour le texte : fillText (texte plein) et strokeText (texte en contour), en détaillant leurs arguments – le texte à dessiner et les coordonnées de départ. Un exemple concret utilise le texte « Bonjour » placé aux coordonnées (100, 100). Le ton est pédagogique et l’accent est mis sur les paramètres essentiels pour créer des captchas ou des graphiques textuels.

Chapters

Dans les leçons précédentes, nous avons vu comment créer les formes de base comme les traits, les arcs et les polygones. Aujourd'hui, nous allons voir comment intégrer du texte aux images créées dynamiquement en JavaScript. Bien entendu, les textes sont parfois très utiles dans certaines images comme c'est le cas pour les graphiques ou les captchas. On conserve la même balise Canvas de la dernière fois. Ensuite, on intègre le code JavaScript. Au chargement de la page, on crée le contexte de rendu en 2D bien entendu. Ensuite, on définit des couleurs de fond et de contour. Par exemple, le rouge pour le fond et le noir pour le contour. On définit aussi l'épaisseur des traits à 2 pixels par exemple. Nous avons déjà eu l'occasion de voir toutes ces méthodes avant. Ce qui est nouveau pour aujourd'hui, c'est l'intégration du texte. Il existe 2 méthodes qui permettent d'intégrer un texte à une image, soit la méthode fillText ou bien strokeText. La première méthode intègre un texte plein et la deuxième méthode pour un texte creux ou bien un texte avec un contour seulement. On commence par le texte plein. Le premier argument, c'est le texte que l'on souhaite intégrer. Je mettrai Bonjour par exemple. Le deuxième et le troisième argument sont les coordonnées du point du commencement du texte. Je mettrai par exemple 100 pour les X et 100 pour les Y.