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...

[FMaz]

Face à tant d'engouement ( ) j'ai créer un petit site pour documenter le script:

http://fmaz.developpez.com/proj/imgwatermark/

... si ca peut servir à quelqu'un !

[okoweb]

Face à tant d'engouement ( ) j'ai créer un petit site pour documenter le script:

http://fmaz.developpez.com/proj/imgwatermark/

... si ca peut servir à quelqu'un !

Salut,
Vraiment, je n'ai pas saisi le but de votre script. Je suis arrivé sur la page de demo, je vois une image et pas de watermark par dessus. Vraiment je pige rien dans tout ça.

Meilleures salutations...

[FMaz]

Ho, ouep, il semble qu'avec google Chrome, le watermark se mettait avec une dimension de 0x0 par défaut.

C'est réglé, c'est vraiment 100% par défaut.

Si tu as encore un problème après avoir actualisé la page, pourrais-tu m'indiquer quel navigateur tu utilise ?

Merci pour avoir pris la peine de m'informer du problème !

[okoweb]

Je suis bien sur cette page : http://fmaz.developpez.com/test/watermark/
J'utilise firefox 3.6. Je ne vois qu'une seule image. Où est l'image principale et où le watermark. Cette histoire de watermark m'intéresse car je souhaite mettre un copyright image sur les photos de mon site. Cette méthode m'a l'air intéressante car mes photos resteront intactes, le copyright ou watermark n'est visible qu'à l'affichage.

Meilleures salutations.

[FMaz]

Vous avez l'ancienne adresse, la nouvelle est:
http://fmaz.developpez.com/proj/imgwatermark/

Dans le cas de la démo, le watermark est un A blanc, par défaut il est en plein centre de l'image. L'image de fond est un paysage.

Si vous ne voyez toujours pas le A, j'aimerais que vous vérifiez si vous avez une erreur javascript (Outils->Console d'erreur), et que vous me donniez les valeurs X, Y, W, H, A s'il y en as. Merci !

Ce script ne sert qu'à placer le watermark pour ensuite soumettre les valeurs du placement à un script (PHP ou autre) qui s'occupera de rendre le watermark permanent.

Si vous êtes intéressé par la mise en place automatique de watermark non-permanent, il existe des techniques CSS, voir:
http://www.sohtanaka.com/web-design/...ss-watermarks/

... c'est d'ailleur de ce tutorial --qui ne répondais pas à mon besoin-- que j'avais tiré l'image de ma première version. Là j'en ai pris une dont je suis certain qu'elle soit libre droit

[okoweb]

Vous avez l'ancienne adresse, la nouvelle est:
http://fmaz.developpez.com/proj/imgwatermark/

Dans le cas de la démo, le watermark est un A blanc, par défaut il est en plein centre de l'image. L'image de fond est un paysage.

Ca marche super bien, merci.

Ce script ne sert qu'à placer le watermark pour ensuite soumettre les valeurs du placement à un script (PHP ou autre) qui s'occupera de rendre le watermark permanent.

Pouviez-vous être plus claire... Comment interagir avec PHP pour rendre le watermark permanent.

watermark non-permanent, qu'est-cela voudrait dire...

Merci d'avance...

[FMaz]

Plus clair ? hehe
La demande initiale était:

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.