Dans ce projet il s'agit de modifier une image par programmation, les tâches suivantes sont à réaliser :
Conversion en niveaux de gris,
retournement,
floutage par pixellisation.
Dans une page web un élément img contient l'image source et un élément canvas est utilisé pour réaliser l'image retouchée.
En outre trois boutons permettent de choisir la transformation que l'on veut appliquer.
Pour effectuer cette transformation la couleur de chaque pixel est remplacée par une teinte de gris plus ou moins foncée, le calcul de la teinte de gris peut se faire de plusieurs façons à partir des composantes rouge, vert et bleu du pixel original :
$\text{G}=\dfrac{\text{R}+\text{V}+\text{B}}{3}$ (moyenne)
$\text{G}=\dfrac{\min(\text{R,V,B})+\max(\text{R,V,B})}{2}$ (moyenne entre le minimum et maximum des 3 composantes)
$\text{G}=0,2125\times \text{R}+0,7154\times \text{V}+0,0721\times \text{B}$ (Couleurs « vraies »)
$\text{G}=0,299\times \text{R}+0,587\times \text{V}+0,114\times \text{B}$ (Signaux vidéos)
Dans ce projet nous utilisons la méthode de la moyenne.
Pour retourner l'image on fait simplement passer tout les pixels de la position $(x~;~y)$ à la position $(x~;~h-y)$ où $h$ est la hauteur en pixels de l'image.
L'image est découpée en zones carrées et tous les pixels d'une même zone sont mis à la même couleur. La couleur de la zone est obtenue en faisant la moyenne de chaque composante RVB des différents pixels de la zone.
Une variable granularite est utilisée pour définir la taille en pixels des zones carrées. La longueur et la largeur
en pixels de l'image n'étant pas forcément divisibles par granularite on ne traite pas les « bords » restant.