HervéRenault.fr

Inclure un canevas dans un formulaire

Il n'existe pas d'élement de formulaire input type="canvas" pour le moment.

Donc sur l'évènement submit du formulaire, on doit récupérer le contenu du canevas avec la méthode toDataURL, puis mettre cette valeur dans un champ hidden, cf code source de cette page.

Puis, dans le script qui reçoit les données, il suffit de décoder le paramètre en Base64 pour récupérer l'image et en faire ce qu'on veut (l'afficher, l'analyser, la sauver dans un fichier)

Note pour les smartphones : quand on dessine avec le doigt sur le canevas, il ne faut pas que ça déclenche le défilement ou le rechargement de la page par le navigateur : on doit donc bloquer les interactions tactiles avec la règle CSS touch-action: none sur le canevas (cf MDN). De plus, sur Safari iOS, quand on dessine du bas vers le haut, ça masque la barre d'URL (et inversement). Pour éviter ça, je ne vois qu'une solution : mettre le canevas dans une modale.