Discussion :

[bouelos]

Bonjour amis développeurs,

je voudrais faire évoluer un site en introduisant un rogneur javascript permettant la création d'avatars.

La taille d'une image étant un problème majeur dans un site Web, cela permettrait donc à un utilisateur de charger une image et de la redécouper avec une possibilité d'aperçu..

Je cherche donc comment faire.


Merci d'avance

[jac3n]

Tu doit te servir d'astuces, en somme c'est assez simple :

- Tu crée dynamiquement un DIV de dimmenssions fixes (selon la taille maximale de tes avatars);

- Mettons que tu lui donen une opacity ".3" pour faciliter la tache au client;

- Tu utilise onmousedown, onmousemove et onmouseup pour respectivement, créer, déplacer et sauvegarder la position de ton DIV;

- Tu combine onmouseup avec une astuce CSS de background (tu n'affiche à l'écran que la partie que le client à sélectionné grace au DIV) : backgroundPosition;

- Apres tu utilise la librairie PHP que tu veut pour découper lavatar du client selon les coordonées

En tout et pour tout tu devrait en avoir pour 100 lignes de code au grand maximum

Si tu te sent pas chaud j'essayerait de t'aider pour le JS

[SpaceFrog]

il y a un code dans les contriibution pour le traçage de la zone à conserver ..
il te premettra de recupérer les coordonnées...
pour ce qui est du rognage effectif, cela ne pourra se faire qu'en php (ou tou du moins en language serveur

[bouelos]

Ok merci jac3n, j'vais commencer comme ça ...

SpaceFrog c'est où les contributions ? j'ai beau connaître le site, j'ai jamais vu cela.

[SpaceFrog]

http://www.developpez.net/forums/forumdisplay.php?f=460

[bouelos]

Bonjour,

C'est bon j'ai presque terminé avec un mix entre du javascript (pour le cadrage sur l'image) et du php (pour la découpe de l'image).

L'image est découpée à la taille voulue, mais toujours au milieu, je n'arrive pas à préciser la position du cadre par rapport à l'image.

La position du cadre est précisée avec du javascript :

function cadrer() {
curseur.top = (y-100)+"px";
curseur.left = (x-270)+"px";
curseur.backgroundPosition = (x-270)+"px "+(y-100)+"px";
}

Et pour le php la fonction de découpe a besoin des coordonnées :

imagecopy($temp, $source, $left,$top, ($largeur-$largeur_max)/2, ($hauteur-$hauteur_max)/2, $largeur_max, $hauteur_max);


Ma question est donc : est-il possible que je puisse passer les variables javascript (comme curseur.left et curseur.top) au PHP (comme $left et $top) ?

Et ce, sans passer par url ...

J'espère avoir été assez clair.

Merci.

[SpaceFrog]

cette syntaxe me parait très louche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

curseur.backgroundPosition = (x-270)+"px "+(y-100)+"px";

enlève les px ?

[bouelos]

oui je peux les enlever, mais ça résoud pas mon pb ^^

[SpaceFrog]

oui bien sur avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

self.location.href='mapage.php?Left="+$left +"&Right="+$right

[bouelos]

Ok alors on est obligé de passer par une url ?

[SpaceFrog]

ou par un formulaire ou par ajax ..
et pour ajax de toute façon faudra concatener l'url ...

[bouelos]

Ok ça roule. Je vais essayer par un formulaire ...

Merci SpaceFrog