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 (
div
pour 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é
transform
dont le documentation est: https://developer.mozilla.org/fr/docs/Web/CSS/transform