Discussion :

[DaTaFaiLuRe]

Bonsoir,

Je vous explique mon problème, j'ai une page PHP avec 2 images repositionnables dynamiquement (par AJAX).

Image1 est mon image de fond, Image2 est un logo (plus petit que Image1).
Le but est que l'utilisateur puisse positionner le logo où il le souhaite sur l'image de fond, et que sur appui d'un bouton "Enregistrer", on fusionne les deux images pour n'en faire plus qu'une.

J'ai pensé à 2 solutions, soit exporter le contenu de la DIV contenant les 2 images en JPEG, mais dans ce cas la je ne sais pas du tout comment faire, et je n'ai rien trouvé sur le net qui correspondrait à mes besoins.

Ou alors utiliser la fonction ImageCopy, (c'est ce que je fais actuellement et ça fonctionne), seulement je ne sais pas comment récupérer les coordonnées de mes images pour les repositionner exactement comme l’utilisateur les a disposé.

Auriez vous des solutions, pistes, sites, morceaux de code à me proposer?

Merci d'avance.

[sabotage]

Si ton système de déplacement d'image est fait en javascript, il n'y a que lui qui peut te dire ou sont placés les images.

[FMaz]

Moi aussi je cherche ce genre de solution.
J'utilise JCrop pour recadrer les images, et je me dit qu'il serait surement possible de faire un équivalent au niveau de l'ergonomie pour permettre de gérer la superposition d'une image sur une autre.

Dans mon cas, c'est pour faire des "watermark".

Pour le code PHP qui fusionne les images, je suis tout à fait capable de le produire, cependant pour le Javascript, ca serait une autre pair de manche...


En gros, il faudrait:
- Pouvoir définir l'image de fond
- Pouvoir définir une -- ou des-- image à superposer
-- Pouvoir la déplacer
-- Pouvoir la redimentionner
-- HTML5: pouvoir la faire pivoter ? Bon je rêve.

Ensuite au niveau du retour, on s'attend à ce que le javascript nous retourne, dans des input hidden:
- La position X,Y de l'image
- La taille W, H de l'image
- (L'angle de rotation :p)


Faudrait regarder du coté de JQuery s'il ya une bonne librairie de Drag.

[DaTaFaiLuRe]

Désolé d'avoir poster au mauvais endroit, et merci d'avoir déplacer le sujet.

Je vais jeter un œil du coté de JQuery, je vous retiens au courant quand j'aurai quelque chose de fonctionnel.

MErci

[FMaz]

He bien le moins qu'on puisse dire, c'est que la question m'a motivée !

Alors voici donc une script grandement inspiré de JCrop.
Il utilise la librairie JQuery & JQuery UI (draggable)

C'est:
- non-testé en profondeur
- sans documentation
- minimalement fonctionnel
- et gratuit !

Dis-moi ce que tu en pense:
http://fmaz.developpez.com/test/watermark/


Pour moi c'est encore qu'un test, car je vais devoir reprendre une bonne partie du code si je veux pouvoir en faire quelque chose de redimentionnable avec l'esthétisme de JCrop.


Et après pour la partie PHP, ca sera probablement à l'aide de cette fonction:
http://www.php.net/manual/fr/functio...ecopymerge.php

[FMaz]

Mise à jour.

J'ai implémenté la librairie Resizable de JQuery UI, ainsi qu'ajouté la possibilité de styliser div.watermark (mettre un contour ou un arrière plan par exemple).

Dans le cas des bordure, je me suis assuré que ca n'influence pas la détection de la position, les bordures sont donc à l'intérieur de la zone de l'image, et sous l'image. Autrement dit, si l'image n'est pas transparente, on ne verra pas les bordures.


Edit:
La gestion de l'opacité !
Bon, je crois que ca fait le tour...