8791 sujets

Développement web côté serveur, CMS

[Résolu] Enregistrer un canvas sur un serveur

Bonjour à vous, j'ai un problème (vous vous en doutez) que je n'arrive pas à résoudre...
Pour un projet en cours (bts design graphique) je voudrais travailler l'altération d'une image sur internet, l'idée est qu'à chaque chargement de l'image, un pixel de celle-ci se détruit (passe en blanc) jusqu'à la destruction complète de l'image petit à petit.
J'ai réussi à mettre en place la première étape avec l'élément canvas (bien pratique) et un peu de javascript : à chaque chargement un pixel de l'image se détruit, vous pouvez voir le résultat ici (j'ai mis un carré de 10px pour le test)

Le gros problème maintenant c'est d'enregistrer tout ca sur le serveur et là je bloque, j'ai cherché sur internet et j'ai trouvé pas mal de pistes ( chez mozilla, sur ce site ou ca à l'air de bien marcher ou encore là ) mais autant je me dépatouille en javascript pour arranger ce que je glane sur internet autant le php est proche du chinois pour moi (faut vraiment que je m'y mette) ...

J'ai vu aussi qu'avec la librairie GD c'est un jeu d'enfant d'enregistrer une image (dispo sur mon serveur) seulement un canvas n'est pas une image normale, non ?

En espérant vraiment trouver un super héro qui pourrait m'expliquer comment procéder, je vous souhaite une bonne journée Smiley smile
Bonsoir, je n'ai pas compris quel était ton problème, mais si ce que tu cherche à faire et d'enregistrer ton image (avec un pixel détruit) à chaque rechargement de la page, tu auras forcément besoin de php puisque javascript ne permet pas d'enregistrer des fichiers sur le serveur.
Je t'explique pourquoi c'est compliqué:
Ton canvas est génèré chez le client, donc pour le récupérer sur le serveur, il faut forcément employer Ajax, ou alors jouer avec les iframe. De plus, et comme tu l'as dis, les canvas ne sont pas des images comme les autres, ce qui rend la chose plus complexe encore.
La technique que je te conseille:
Si javascript ne t'est pas imposé, laisse-le tomber pour ce projet; en effet ce sera 100 fois plus simple de n'utiliser que php avec la bibliothèque GD. Ce travail peut être une bonne entrée en matière pour te familiariser avec php qui, selon moi, est plus simple que javascript étant donnée la souplesse de sa syntaxe. Ainsi, pour recréer en php ce que tu à déjà fais en javascript, il te faudra utiliser les fonctions:
-imagecreatefromjpeg();
-imagerectangle();
-imagejpeg();
-rand();

Ton script ressemblera à ceci:
<?php
   $image=imagecreatefromjpeg('./image01.jpg');
   $white=imagecolorallocate($image,255,255,255);
   $imageWidth=200;
   $imageHeight=200;
   $squareSize=10;
   $x=rand(0,$imageWidth-$squareSize);
   $y=rand(0,$imageHeight-$squareSize);
   $cmpt=1;
   while($cmpt<=$squareSize) {
     ImageRectangle($image,$x,$y,$x+($squareSize-$cmpt),$y+($squareSize-$cmpt),$white);
     $cmpt++;
   }
   imagejpeg($image,'./image01-modifiee.jpg');
   echo '<img src="./image01-modifiee.jpg"/>';
?>

Pense à mettre le fichier image01-modifiee.jpg en chmod 777 et puis c'est tout bon Smiley cligne
Modifié par juliendargelos (01 Apr 2013 - 23:49)
Quelle rapidité ! Merci beaucoup pour ta réponse, en effet ton script à l'air beaucoup beaucoup plus propre que ce que j'ai pu faire !
Javascript ne m'est pas du tout imposé, à vrai c'est le seul language que je comprends à peu près je me suis donc dirigé tout naturellement vers ce qui m'est familier Smiley smile

J'ai vu la puissance de cette librairie pour retoucher les images je dois vraiment m'y intéresser de plus prêt !

J'ai réussi néanmoins, à l'instant, à faire ce que je voulais à l'instant avec ajax et php, à partir de ce post sur mitgux !

Un apercu ici, il faut charger la page, cliquer sur upload et recharger pour voir l'évolution !

Je vais quand même reprendre ce que tu m'as donné ca m'a parait plus abordable ^^
Merci beaucoup !
Sujet clos
Aller à