C'est pas mal ton truc Harparine
Sinon j'ai essayer avec GD-Ajax. C'est pas trop dur, mais le probleme c'est qu'a chaque fois que je change un partie du visage, toute l'image se recharge.
Evidemment ce n'est pas optimisé, mais je vais mettre mon code pour ceux que sa peut interresser
Voici le lien si vous voulez essayer :
http://www.mazikim.com/DEV/creertete/
Mes images sont dans le dossier images.
tete1.jpg, tete2.jpg, oueil_droit1.jpg ...
La bdd est constitué comme suit
ID | tete | oueil_droit | oueil_gauche |
Tous les champs sont en int.
Dans les champs j'enregistre le nombre qui correspond a l'image. Par exemple pour tete1.jpg j'enregistre 1 dans la table pour le champs tete.
J'ai 4 fichiers :
config.php : juste pour les infos sur la bdd, ainsi que la connection a la bdd
Code PHP :
<?
/* Configuration de la connection a la base de donnée */
$config_bdd_host="localhost";
$config_bdd_user="root";
$config_bdd_password="";
$config_bdd_bdd="test";
mysql_connect($config_bdd_host,$config_bdd_user,$config_bdd_password);
mysql_select_db($config_bdd_bdd);
?>
image.php : c'est l'image que j'ai créée. Je passe les paramètre en GET (le numero de la tete, des yeux ...)
Code PHP :
<?
header ("Content-type: image/jpg");
// PAGE DE CREATION DU PERSONNAGE
//Allez on créer l'image
$visage = imagecreatefromjpeg("images/tete".$_GET["tete"].".jpg");
$oeuil_droit = imagecreatefromjpeg("images/oueil_droit".$_GET["oueil_droit"].".jpg");
$oeuil_gauche = imagecreatefromjpeg("images/oueil_gauche".$_GET["oueil_gauche"].".jpg");
//On ajoute les yeux au visage ;)
imagecopymerge($visage,$oeuil_droit, 90, 70, 0, 0, 50,30,100);
imagecopymerge($visage,$oeuil_gauche, 20, 70, 0, 0, 50,30,100);
//On affiche l'image
imagejpeg($visage);
imagedestroy($visage, $oueil_droit, $oeuil_gauche);
?>
index.php : page principal. Sur cette page on peut créer une nouvelle tete, et modifier sa tête
Code PHP :
<?
// on inclue config.php
include "config.php"; // il contient entre autre la connection mysql
/* PARTIE JAVASCRIPT DU CODE? C'EST DE L'AJAX */
?>
<script language="javascript">
function request(url,cadre) {
var XHR = null;
if(window.XMLHttpRequest)
XHR = new XMLHttpRequest();
else if(window.ActiveXObject)
XHR = new ActiveXObject("Microsoft.XMLHTTP");
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
XHR.open("GET",url, true);
XHR.onreadystatechange = function attente() {
if(XHR.readyState == 4)
{
document.getElementById(cadre).innerHTML = XHR.responseText;
}
}
XHR.send(null);
return;
}
</script>
<div id="image"></div> <!-- Div ou sera afficher l'image -->
Creation de tete ! :<br />
<a href="" onclick="request('ajax.php?action=nouveau','image');return(false)">Nouvelle tete</a> <br /><br />
<?
if(!empty($_GET["id"])&& strlen($_GET["id"])) // je vérifie que le visiteur modifie une image
{
?>
Forme tête : <br />
<a href="" onclick="request('ajax.php?action=tete&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete1.jpg" /></a>
<a href="" onclick="request('ajax.php?action=tete&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete2.jpg" /></a>
<a href="" onclick="request('ajax.php?action=tete&valeur=3&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete3.jpg" /></a><br /><br />
Oueil gauche : <br />
<a href="" onclick="request('ajax.php?action=oueil_gauche&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_gauche1.jpg" /></a>
<a href="" onclick="request('ajax.php?action=oueil_gauche&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_gauche2.jpg" /></a><br /><br />
Oueil doit : <br />
<a href="" onclick="request('ajax.php?action=oueil_droit&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_droit1.jpg" /></a>
<a href="" onclick="request('ajax.php?action=oueil_droit&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_droit2.jpg" /></a><br /><br />
<?
}
?>
et enfin ajax.php : fichier appeler par index.php grace a ajax
Code PHP :
<?
//Fonction qui affiche l'image
function image()
{
/* On va chercher dans la bdd tout le necessaire pour faire l'image */
$req=mysql_query("SELECT * FROM tete WHERE ID =".$_GET["id"]."");
while($rep=mysql_fetch_array($req))
{
echo "<img src=\"image.php?id=".$_GET["id"]."&tete=".$rep["tete"]."&oueil_droit=".$rep["oueil_droit"]."&oueil_gauche=".$rep["oueil_gauche"]."\" />";
}
}
//Ajout d'une tete
if($_GET["action"]=="nouveau")
{
mysql_query("INSERT INTO tete VALUES('','1','1','1'");
$req=mysql_query("SELECT * FROM tete ORDER BY ID DESC LIMIT 0,1");
while($rep=mysql_fetch_array($req))
{
echo "Pour modifier votre image cliquez <a href=\"index.php?id=".$rep["ID"]."\">ici</a>";
}
}
// choix de la tete
elseif($_GET["action"]=="tete")
{
mysql_query("UPDATE tete SET tete='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");
image();
}
//Choix des Yeux
elseif($_GET["action"]=="oueil_droit")
{
mysql_query("UPDATE tete SET oueil_droit='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");
image();
}
elseif($_GET["action"]=="oueil_gauche")
{
mysql_query("UPDATE tete SET oueil_gauche='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");
image();
}
?>
Si quelqu'un a une idée pour que l'affichage de l'image soit intantanée je suis preneur !
En espérant que ça guidera certaines personnes
.
je regarderais ca demain il commence a ce faire un peu tard