API Canvas - Intégrer du texte à une image (exemple de CAPTCHA)

Bonjour à tous et bienvenue dans cette nouvelle leçon qui fait partie de la série consacrée à l'API Canvas. 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 les 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, en pixels bien entendu. Alors exécutons. On obtient le texte qui est ici. Bien sûr, il est rouge parce qu'on a spécifié le rouge comme étant la couleur du fond. Par contre, le texte est trop petit, alors on va essayer de l'agrandir un peu. Donc avant l'intégration du texte lui-même, on définit les propriétés de la police à l'aide de l'attribut font. La syntaxe est presque la même utilisée en CSS. On mettra par exemple 60 points. Arial. Alors exécutons. Maintenant le texte est devenu plus grand. Et si par hasard je veux spécifier un texte creux, je remplace fill par stroke. Et voilà. Notez bien que le point de commencement d'écriture est ce point-là qu'on appelle baseline. D'ailleurs c'est une propriété que l'on peut changer avec l'API Canvas. Toujours avant le texte, on déclare l'attribut textBaseline et on met par exemple la valeur top. Dans ce cas, le point de commencement est le coin haut à gauche. On peut mettre bottom. Maintenant le point c'est cette position qui correspond à la position la plus basse du texte qui est dans ce cas le J. Voilà c'est ça. Et la valeur par défaut bien sûr c'est baseline qui correspond à ce point. Il y a aussi d'autres valeurs comme middle, hanging, etc. Donc je vais commenter cette ligne pour garder la valeur par défaut. Une autre propriété c'est le sens d'écriture. Qu'on appelle direction. Par défaut c'est ltr, c'est identique aux valeurs qui sont spécifiées en HTML. Ltr c'est-à-dire left to right, c'est-à-dire de gauche à droite. C'est le cas ici. Sinon on peut mettre rtl, de droite à gauche. Dans ce cas le texte est tronqué, c'est-à-dire c'est comme si on commence à cette position et on va vers la gauche. Bien sûr, cette valeur est réservée pour des textes qui s'écrivent de droite à gauche comme l'arabe. Alors là, on remettra LTR qui est la valeur par défaut. Et voilà. Maintenant qu'on a vu comment intégrer un texte à une image, on va faire un exemple pratique. On essaiera de créer un captcha. Notez qu'il s'agit d'un exemple parce que JavaScript est un langage côté client, donc il ne serait pas pertinent de créer un captcha avec. Vu que le code est chargé sur le client, alors on peut facilement contourner la vérification du captcha. Mais comme je l'ai mentionné, ça sert juste à mettre en pratique ce que nous avons appris. Comme vous le savez, un captcha classique contient une suite de caractères qui sont aléatoires. Alors on va commencer par déclarer la suite des caractères qui seront utilisés. C'est une chaîne de caractères nommée char où je mettrai tous les caractères de l'alphabet par exemple. Il est préférable de retirer le O parce que comme vous le savez, le O et le 0 se ressemblent tellement. Alors pour soulever toute ambiguïté pour l'utilisateur, vaut mieux le retirer. Et si on veut changer les couleurs des caractères de manière aléatoire, alors on va spécifier un tableau qui contient la liste des couleurs voulues. Nommer Color. Dedans, je mettrai par exemple le rouge, l'orange, du bleu, du vert et du rose. Bien sûr, déclarez les couleurs comme vous souhaitez avec l'une des 4 méthodes que nous avons déjà vues. On va retirer ces 2 instructions. Qui définissent les couleurs du fond et du contour. Et maintenant on va mettre en place une boucle qui va générer autant de caractères que l'on souhaite pour le captcha. Dans ce cas c'est comme si on va générer 6 caractères aléatoires. On commence par définir les propriétés de la police. Je peux le mettre à l'intérieur comme à l'extérieur. Puisque ces propriétés ne changent pas, dans ce cas vaut mieux les mettre à l'extérieur de la boucle. J'ai opté pour 90 points, c'est-à-dire une taille légèrement grande, et la famille de police Monospace. Notez bien que la boucle va s'exécuter 6 fois, et à chaque fois on va imprimer un caractère. Donc avant d'imprimer celui-ci, il faut spécifier sa couleur. Je vais opter pour des caractères creux, c'est-à-dire qu'ils sont composés seulement de contour. Alors cette couleur est aléatoire, elle provient du tableau colors. On va générer l'index de manière aléatoire, on a déjà vu ça en JavaScript, c'est grâce à la méthode Math.random. Cette méthode retourne un nombre réel compris entre 0 et 1. Alors que nous on veut un nombre entier compris entre 0 et la longueur du tableau moins 1. Dans ce cas, le nombre est compris entre 0 et 4. Alors on va multiplier par la longueur du tableau moins 1, mais le résultat sera toujours un réel, alors on va l'arrondir grâce à la méthode Math.round. Alors cela permet de retourner une de ces couleurs de manière aléatoire. La dernière étape consiste à imprimer le caractère avec ce logText. Le caractère aussi c'est aléatoire, il provient de cette chaîne, c'est-à-dire car. Alors on mettra ici car.charAt. Là aussi c'est l'une des méthodes que nous avons vu en JavaScript et qu'on va alors mettre à la position du caractère souhaité. Et là ça sera aléatoire. Alors même chose que tout à l'heure, Math.random qu'on multiplie par la longueur de la chaîne moins 1. On passe tout par la méthode Math.round afin de récupérer un entier et non pas un réel. Le deuxième et le troisième paramètre correspondent aux coordonnées du point du commencement de l'impression. Alors là, on mettra le X. Bien sûr, ça dépendra de la variable i puisqu'on va écarter les caractères. On mettra par exemple 80 multiplié par i et on ajoutera une sorte d'offset, par exemple +70. Voilà, comme ça. Alors c'est comme si on a un écart de 80 pixels entre les caractères et ensuite on ajoute un décalage de 70 vers la gauche. Pour la position d'Y, on mettra juste 100. Cette valeur ne change pas, il va rester la même puisque tous les caractères sont imprimés sur la même ligne. Exécutons. Alors on obtient ceci. Par contre, la couleur pose un problème. On va revérifier le code. Ah oui, c'est color, pardon, et pas car. Exécutons. C'est bien. On constate bien que ça change de manière aléatoire. Les couleurs de caractères aussi sont aléatoires. J'espère que vous avez compris comment intégrer un texte à une image. Merci pour votre attention et à la vidéo prochaine.