Ecriture sur image⚓︎
Objectif⚓︎
A partir des fichiers ci-joints, créer une application web qui permet de charger des images et d'écrire dessus.
Le résultat devrait ressembler à ceci:

et en vidéo:
Ce que fait l'application web donnée en annexe⚓︎
- Charger une nouvelle image à partir du disque du client et aller sur une page avec du texte dessus.
Ce que doit faire l'application web à minima⚓︎
- Permettre d'écrire le texte que l'on veut sur l'image à l'aide d'un champ (input).
- Récupérer soit des images déjà chargés précédemment soit une nouvelle image.
- Ajouter un bouton sur la deuxième page (celle permettant d'écrire sur l'image) pour revenir à la page d'accueil.
- Faire que l'application soit plus jolie
Ce que pourrait faire l'application web en plus⚓︎
- Gérer le cas où la personne n'envoie pas une image mais un fichier d'un autre type
- Gérer le cas où la personne n'envoie rien et clique directement sur envoyer
- Modifier le style du texte écrit sur l'image: taille, couleur, police....
- Permettre de charger une image à partir de son url (c'est à dire une image existant déjà sur le web)
- Modifier l'image: faire des bords arrondis, la transformer, l'étirer ...
Mise en oeuvre⚓︎
Le projet devra comporter trois fichiers:
- Un fichier python serveur.py. Il sera une adaptation du fichier donné en annexe.
- Un fichier index.html dans le répertoire
templates. Il sera une adaptation du fichier donné en annexe. - Un fichier change.html dans le répertoire
templates. Il sera une adaptation du fichier donné en annexe. - Un fichier style.css dans le répertoire
static. Il sera une adaptation du fichier donné en annexe.
Il faudra rendre ces fichiers dans un seul fichier compressé ayant le nom suivant projetweb_nom.zip (ou nom sera remplacé par votre nom de famille).
Quelques informations utiles⚓︎
- Vous pouvez stocker dans une liste les liens vers les images déjà chargées.
- Pour afficher des blocks (
divpour la version générique) en colonne (pour les formulaires), regardez la documentation suivante: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns - L'alignement du texte à droite ou à gauche se fait via la propriété
text-align. Voir https://developer.mozilla.org/fr/docs/Web/CSS/text-align - La transformation en css se fait via la propriété
transformdont le documentation est: https://developer.mozilla.org/fr/docs/Web/CSS/transform