Aïe que veut tu dire par
Il m'a expliqué que ce qu'il voudrais c'est de pouvoir enregistrer l'image dans un repertoire.
et
Pour qu'après les utilisateurs puissent les ré-utiliser ci-besoin.
Il veut que l'utilisateur puisse télécharger l'image sur son ordinateur?
ou que l'image soit enregistrée dans un répertoire du site?
Bref je comprends pas vraiment cette histoire, mais en général le cahier des charges
on le fait au début... ça évite de se retrouver dans ce genre d'impasse!
En fait le cahier des charges bien été fait ^^ mais la situation change car il rajoute des éléments au fur et à mesure.
De base je devais juste créer un avatar que les gens pourraient personnaliser mais maintenant il veut que l'utilisateur puisse télécharger l'image sur son ordinateur.
De plus, il aimerais que l'utilisateur ait 2 moyen pour choisir les couleurs :
- en utilisant une palette de couleur (fait)
- en faisant glisser des couleurs sur la zone de texte (non fait) -> de base c’était en écrivant des couleurs en anglais dans la zone de texte (fait)
Donc en gros de base l'avatar donnait ca :
avatar quasi fini.png
Maintenant il voudrait plus quelque chose comme ça :
avatar4.png
Tout en permettant à l'utilisateur de télécharger son avatar.
Par rapport à mes pages elles sont toutes en php (même l'image car il faut récupérer les infos du formulaire):
image.php :
<?php
// On recupere les informations du formulaire et on test
if(isset($_GET['cravate']))
$coul_cravate=$_GET['cravate']; //si couleur personnalisée
else
$coul_cravate='white'; //sinon blanc par defaut
if(isset($_GET['col']))
$coul_col=$_GET['col']; //si couleur personnalisée
else
$coul_col='white'; //sinon blanc par defaut
if(isset($_GET['tshirt']))
$coul_tshirt=$_GET['tshirt']; //si couleur personnalisée
else
$coul_tshirt='white'; //sinon blanc par defaut
if(isset($_GET['yeux']))
$coul_yeux=$_GET['yeux']; //si couleur personnalisée
else
$coul_yeux='white'; //sinon blanc par defaut
if(isset($_GET['peau']))
$coul_peau=$_GET['peau']; //si couleur personnalisée
else
$coul_peau='white'; //sinon blanc par defaut
// Fin des tests
?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="349"
id="svg5537"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="image.svg">
<metadata
id="metadata5550">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="767"
inkscape:window-height="848"
id="namedview5548"
showgrid="false"
inkscape:zoom="0.60933961"
inkscape:cx="176.34349"
inkscape:cy="165.00446"
inkscape:window-x="832"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="svg5537" />
<desc
id="desc5539">Avatar</desc>
<defs
id="defs5541">
<g
id="tete">
<circle
cx="176"
cy="194"
r="130"
stroke="black"
fill="blue"
id="circle5544"
d="M 306,194 C 306,265.79702 247.79702,324 176,324 104.20298,324 46,265.79702 46,194 46,122.20298 104.20298,64 176,64 c 71.79702,0 130,58.20298 130,130 z" />
</g>
<!-- Début de la création de l avatar -->
</defs>
<!-- Peau -->
<path
sodipodi:type="arc"
style="fill:<?php echo $coul_peau; ?>;fill-opacity:0.69406391000000001;fill-rule:evenodd;stroke:#000000;stroke-width:1.44141793000000007;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.80365295000000003;stroke-dasharray:none;opacity:1"
id="peau"
sodipodi:cx="190.85249"
sodipodi:cy="183.88043"
sodipodi:rx="92.924431"
sodipodi:ry="95.06884"
d="m 283.77692,183.88043 a 92.924431,95.06884 0 1 1 -185.848858,0 92.924431,95.06884 0 1 1 185.848858,0 z"
transform="matrix(1.403424,0,0,1.3718014,-92.347035,-96.748451)"
inkscape:label="#peau" />
<!-- Oeil gauche -->
<path
sodipodi:type="arc"
style="fill:<?php echo $coul_yeux; ?>;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-0.20299212,-37.77583)"
inkscape:label="#yeux" />
<!-- Pupille gauche -->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none"
id="pupilleG"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-5.2469634,-64.300067)"
inkscape:label="#pupille" />
<!-- Oeil droit -->
<path
sodipodi:type="arc"
style="fill:<?php echo $coul_yeux; ?>;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-80.191992,-38.65833)"
inkscape:label="#yeux" />
<!-- Pupille droite-->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:0.80365293999999998"
id="pupilleD"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-85.246963,-64.300067)"
inkscape:label="#pupille" />
<!-- Tshirt -->
<path
style="fill:<?php echo $coul_tshirt; ?>;stroke:#000000;stroke-width:1.01100004000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 47.760189,182.27438 21.040317,14.608 15.83466,10.29199 16.164554,6.308 24.08188,4.98 43.21543,1.66 33.50087,-1.45151 24.22967,-6.18448 29.03022,-7.30401 32.65898,-13.94399 16.18675,-8.99102 c -0.74326,6.45035 -3.7249,13.47381 -6.10867,20.47099 -6.54343,20.38073 -27.72227,44.29602 -28.22196,44.29602 -6.36368,6.7901 -14.23989,12.90796 -23.09221,18.592 -0.60411,0.96519 -11.44887,7.50172 -20.06175,10.91301 -7.22374,2.65878 -12.98701,4.34391 -19.10969,6.26864 l -14.01322,1.62717 -22.98338,1.83842 -16.68994,-1.78499 c -5.11309,-0.97544 -9.90906,-1.63376 -16.33521,-3.92226 -4.8345,-1.6283 -9.70753,-3.29139 -15.50478,-5.78897 l -12.4135,-6.66059 c -3.13865,-1.73147 -7.6679,-4.85355 -11.546104,-7.32457 -3.941309,-3.12329 -7.915752,-6.28918 -13.751522,-11.8482 -5.73455,-5.05673 -10.534986,-11.67031 -15.474857,-18.05151 -4.469168,-5.97149 -7.806071,-12.50912 -11.200401,-19.01804 -4.177309,-9.74537 -7.735413,-19.55955 -9.436137,-29.5801 z"
id="tshirt"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<!-- Bas de cravate -->
<path
style="fill:<?php echo $coul_cravate; ?>;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 185.985,327.248 c 15.73547,-18.51232 27.30568,-27.30568 27.30568,-27.30568 l -11.57021,-29.15692 -4.16527,-19.66934 -6.71072,-6.47932 -12.72722,0 -7.17353,3.70247 -18.74373,53.45434 4.62808,2.77685 z"
id="bas_cravate"
inkscape:connector-curvature="0"/>
<!-- Haut de cravate -->
<path
style="fill:<?php echo $coul_cravate; ?>;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 162.39041,220.28175 -9.09541,13.0573 17.23488,14.64449 7.39473,-4.20153 11.62517,0 8.03791,6.45771 11.07467,-19.46215 c 0,0 -4.66545,-11.63575 -7.621,-11.63575 -2.95555,0 -38.65095,1.13993 -38.65095,1.13993 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsc"
inkscape:label="#cravate"/>
<!-- Col gauche -->
<path
style="fill:<?php echo $coul_col; ?>;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 201.76163,218.75624 23.45612,-5.68637 28.74795,-7.58344 -11.03034,15.39318 -13.90223,13.4572 -13.32111,10.16172 -3.84904,2.56147 -2.82752,-16.32299 c -2.01552,-4.09821 -3.77811,-8.30482 -7.10179,-11.84239"
id="col_gauche"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- Col droit -->
<path
style="fill:<?php echo $coul_col; ?>;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 96.62283,212.30707 c 9.54031,3.18301 19.46731,4.43255 29.25939,6.35672 l 36.18364,1.61483 -8.86926,13.04323 -2.55044,14.52495 -9.49997,-2.74074 -19.55364,-9.91058 -14.13532,-10.75701 z"
id="col_droit"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- bouche -->
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 167.30292,195.69684 4.11856,2.76909 c 7.2984,1.73982 16.33913,1.89412 20.79268,1.22451 l 9.74803,-2.01266 c 3.69991,-1.3347 7.16678,-1.97031 11.11672,-4.05512 4.11354,-3.25621 6.79585,-6.75096 10.16326,-10.13153 l 1.77334,-3.15259"
id="path6441"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</svg>
index.php :
PS: le code est en htlm, c'est normal ! J'ai écris l'index en php conceptuel mais j'ai cru comprendre que peu de personnes l'utilisent. il faudra juste penser qu'il y'a plein de balises echo ' ' après le commentaire "A partir de la c'est du php !"
<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='fr' xml:lang='fr'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<link rel="stylesheet" type="text/css" href="avatar.css" title="gh" />
<link href='http://localhost/davy/img/personne0.png' rel='icon'>
<title> Avatar </title>
</head>
<body>
<script type="text/javascript">
champ="";
formulaire="";
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
// on ouvre la palette
}
function valid_couleur(couleur) //fonction appelée lorsqu'on valide la palette. On récupère la couleur.
{
document.forms[formulaire].elements[champ].value=couleur;
}
</script>
// A partir de la c'est du php !
<h2> Creez votre avatar :</h2><br><br>
<center>
<table border="0" cellpadding="0" summary="?" >
<tr>
<td align='left'>
<h3>Avatar</h3>
</td>
</tr>
<tr>
<td align='left'>
echo 'include("image.php")';
</td>
<td align='left' >
<center>
<strong>Choix:</strong>
</center><br>
<form name='avatar' action='index.php' method='get'>
Peau:<br>
<input type='text' id='peau' name='peau' value='' placeholder='Couleur de peau' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','peau')">
<br><br>
Yeux:<br>
<input type='text' id='yeux' name='yeux' value='' placeholder='Couleur des yeux' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','yeux')">
<br><br>
T-shirt:<br>
<input type='text' id='tshirt' name='tshirt' value='' placeholder='Couleur du t-shirt' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','tshirt')">
<br><br>
Cravate:<br>
<input type='text' id='cravate' name='cravate' value='' placeholder='Couleur de la cravate' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','cravate')">
<br><br>
Col:<br>
<input type='text' id='col' name='col' value='' placeholder='Couleur du col' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','col')">
<br><br>
<span class='ps'>PS: Vous pouvez aussi ecrire les couleurs en anglais.<br>La couleur par default est le noir.</span><br><br>
<input type='submit' value='Appliquer'>
</form>
<form name='image' action='enregistrer.php' method='get'>
<input type='hidden' name='img' value='http://localhost/davy/Projet%202/' id='img'>
<input type='submit' value='Enregistrer'>
</form>
</td>
</tr>
</table>
</center>
// Fin du php
</body>
</html>
Et pour ceux qui le veulent vraiment :
le même index en php conceptuel :
<?php
include("std.php") ; # notre librairie dite "conceptuelle"
debutPageMinimal("Avatar","avatar.css") ;
img_entete("http://localhost/davy/img/personne0.png","icon");
?>
<script type="text/javascript">
champ="";
formulaire="";
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
// on ouvre la palette
}
function valid_couleur(couleur) //fonction appelée lorsqu'on valide la palette. On récupère la couleur.
{
document.forms[formulaire].elements[champ].value=couleur;
}
</script>
<?php
// titre
h2(" Creez votre avatar :") ;
br(); br();
// début du formulaire de création d'avatar
center ();
table ();
tr();
td(); h3("Avatar"); fintd();
fintr();
tr();
td(); include("image.php");/* L'image est ici */ fintd();
td(); /* Suite du formulaire */
center(); echo b("Choix:"); fincenter(); br();
$peau=!empty($_GET['peau']) ? $_GET['peau'] : NULL;
$yeux=!empty($_GET['yeux']) ? $_GET['yeux'] : NULL;
$tshirt=!empty($_GET['tshirt']) ? $_GET['tshirt'] : NULL;
$cravate=!empty($_GET['cravate']) ? $_GET['cravate'] : NULL;
$col=!empty($_GET['col']) ? $_GET['col'] : NULL;
formulaire("avatar","index.php");
echo ("Peau:"); br();
input_text('peau',''.$peau.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'avatar\',\'peau\')');br(); br();
echo ("Yeux:"); br();
input_text('yeux',''.$yeux.'','Couleur des yeux');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'avatar\',\'yeux\')'); br(); br();
echo ("T-shirt:"); br();
input_text('tshirt',''.$tshirt.'','Couleur du t-shirt');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'avatar\',\'tshirt\')'); br(); br();
echo ("Cravate:"); br();
input_text('cravate',''.$cravate.'','Couleur de la cravate');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'avatar\',\'cravate\')');br(); br();
echo ("Col:"); br();
input_text('col',''.$col.'','Couleur du col');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'avatar\',\'col\')'); br(); br();
span("ps") ; echo ("PS: Vous pouvez aussi ecrire");echo(" les couleurs en anglais."); br();
echo("La couleur par default ");echo("est le noir.");
finspan() ; br(); br();
input_submit("Appliquer");
finformulaire();
formulaire("image","enregistrer.php");
$UrlAvatar = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
input_hidden('img',''.$UrlAvatar.'') ;
input_submit("Enregistrer");
finformulaire();
fintd();
fintr();
fintable();
fincenter();
?>
</body>
</html>
Du coup il faudrait "juste" que l'utilisateur puisse télécharger l'avatar qu'il à crée sur son PC sachant que pour le moment l'avatar est en php (image.php) et qu'il faudrait que l'image enregistrée soit du SVG si possible sinon PNG ou JPEG
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
La morale de l'histoire: on ne modifie pas un cahier des charges en cours de route 
):
