Voilà le plan : faire un outil de redimmensionnement d'image, crop d'image etc... en JS interfacé avec PHP.
 
Première pierre à l'édifice :
 
http://www.z-art.org/test6/index-image.html
 
 
Compatible pour le moment :
 
IE 5.5+ (testé).
Mozilla 1+ (testé aussi).
Opera 7+
 
Testez le chez vous SVP.
 
UPDATED (3) :
 
- Bug corrigé avec IE + différentes améliorations.  
- XHTML 1.1 compliant.
- testé sur Opera.
- Redimensionnement opérationnel !
 
- Supperposition d'images opérationnel !
 
 

bon, ben
(Faudra que j'apprenne un peu mieux le JS un jour ou l'autre)

Le truc, c'est que je vais me débrouiller pour que cet éditeur fonctionne même si le JS est désactivé (à la manière de mon éditeur de texte).
La partie graphique facilitera les choses mais NE SERA JAMAIS indispensable.

Mais ou s'arretera-t-il ?!?!?!
 

!! UPDATED !!

C'est sensé faire quoi ?

 
Sélectionner un bout d'une image pour pouvoir cropper une image dans une interface d'admin et éviter ainsi au client d'utiliser un logiciel tiers pour travailler ses images.
 
C'est une première pierre de l'éditeur d'image que je prépare. Le but est de rendre un client totalement autonome avec un simple appareil photo numérique et son site dynamique. Quand tu vas dans un cyber café, tu vas pas installer ton éditeur d'image...  

Si c'est juste la partie de selection alors ça marche vraiment bien !
 
Juste une petite remarque : quand tu dessine le rectangle de selection, tu ne peux tracer un rectangle que de haut gauche vers bas droite et pas l'inverse.

drapo

si on sort trop vite de l'image le rectangle est pas mis a jour correctement, ca gene pour selectionner un coin de l'image

 
Voui, je sais. Je travaille sur ce problème justement.

 
Va dire ça à Bilou. IE refuse tout width ou height négatif pour un div au niveau javascript.  

 
ben change ta facon de dessiner ton rectangle ?

 
Utiliser le border d'un div reste de loin la meilleure méthode. ça évite tout raffraichissement du div de support. Et puis, je ne pense pas que ce soit très gênant.

 
si, si tu veux selectionner une portion partant d'un bord gauche de ton image
 
Tu sais que j'y connais queud en JS/html/machin par contre, ta div, tu veux pas la changer en fonction des coordonnees ? (genre dessiner de curseur souris a point cliqué ou inversement en fonction des coordonnées ?)

 
humm...
 
Si ce doit être possible en tester les coordonnées du pointeur et en décrétant que le premier point cliqué devient le deuxième point.    
 
Vous pensez que c'est réellement utile ?    

 
franchement ouais ca fait plus serieux, et ca doit pas prendre bpc de ligne de code.  
 
le bout en gras est un peu faux, tu peux pas t'en tirer comme ca, fo que tu passes ca pour les deux coordonnées(x et y)
 

 
Je vais me pencher sur la question.    Merci pour les remarques.

 
Ce premier point est rêglé.
 
Je passe au suivant, pouvoir sélectionner à l'envers.  

Ok, j'ai trouvé l'algo, mais j'hésite à le mettre en place. Je ne vois pas tellement ce que ça apporte en fait. C'est sûr, c'est un peu plus confortable, mais bon...  
 
De plus, ça va quand même énormément compliquer le code en raison déjà du fait de l'interprêtation un peu différente d'IE et de Moz, sachant que pour établir la sélection, je place la bordure légèrement à l'extérieur d'un PX pour ne pas masquer ce qu'il y a dessous.  
 
Bref, c'est compliqué pour une feature pas indispensable.
 
On verra plus tard.

L'algo est juste une série de min max sur les valeurs. Je vois pas la difficultée.

 
Oui, mais c'est pour l'application que c'est plus compliqué. Au niveau du div de sélection, il faut suivant le navigateur tricher pour gagner un px à gauche et/ou en haut suivant le cas. C'est la merde. Je ne rentre pas trop dans les détails, mais c'est réellement compliqué.
L'idéal serait d'avoir le curseur à l'emplacement exact du coin gauche/haut du div de sélection, mais si on fait ça, le div de sélection ne s'arrête plus au bord étant donné que ce div de sélection est compris dans le div conteneur etc... etc... Je continue ?  

Mais bon, si tu te sens de continuer.
 
Tu pourras en profiter pour rêgler le problème avec Opera.

J'ai un joli bug, je fais un screenshot?

 
Avec Opera ? Volontier .  

 
J'ai le même problème chez moi avec Opera.
 
Je travaille dessus d'arrache pied, mais c'est pas simple.
 
Si tu veux m'aider, dis moi comment connaitre la position d'un div en absolute (la position en absolute sur l'écran, PAS le div) avec ce niouff d'opera.
 
Il y a deux problèmes. Celui que tu montres peut se résoudre assez facilement. Il est lié au fait que le curseur est DANS le div de sélection et que le div de sélection est inclu dans le div "d'image" qui réagit en cas de onmouseover.
 
C'est pour l'autre problème que j'ai plus de difficulté, parce qu'opera renvoie un résultat relatif en fonction du div conteneur avec document.getElementById('divimage').offsetLeft alors qu'il renvoie un résultat en absolute avec document.getElementById('divimage').offsetTop.
 
C'est bel et bien un bug d'opéra on dirait...

La position en relative m'intéresse aussi et peut également résoudre ce deuxième problème

pkoi c'est a chaque fois le bronx pareil pour faire un truc portable d'un browser a un autre ? Meme faire du C++ portable parait plus simple

 
Et encore, dans ce cas précis, les différences entre IE et Mozilla étaient minimes
 
ça a été une autre paire de manche avec mon éditeur bb-code like avec la prévisualisation intégrée.

Bon, j'ai rêglé le problème avec Opera.
 
Tu peux retester Gizmo
 
Maintenant, je commence la partie pour redimensionner l'image derrière.

nickel

 
dsl, je ne vois vraiment pas c'est quoi le problème. Ce que je demande est vraiment un truc tout simple en fait. Si tu veux qu'on en parle

chapeau , j'achète (c'est combien ?)

Merci pour les compliments, mais c'est loin d'être terminé.
 
J'en suis qu'à la recherche fondamentale là...
 
Il faut que je fasse le redimensionnement d'image maintenant.
 
Si vous avez d'autres idées de choses réellement utiles, n'hésitez pas. (Sauf en ce qui concerne le dessin. Il est impossible de dessiner quoi que ce soit en JS à moins d'utiliser une table, mais là, pour une image de 400px sur 300px, on aurait 40 000 cellules et ensuite, je vous explique pas la panique pour sérialiser tout ça et traiter le truc avec PHP en dessinant point par point).

si tu veux un coup de main cote php ...

 
C'est gentil, mais je pense pouvoir y arriver    

bin le truc réellement utile qui me viens à l'esprit serit de pouvoir ensuite ajouter du texte et en choisir le positionnement avec la même méthode
 
comme ça tu peux dériver ton truc vers un éditeur de bouton en ligne ou bien ajouter des copyright facilement sur des photos

 
Pas dur à faire. Le seul hic, c'est que si on pourra choisir le positionnement sans difficulté, on ne pourra pas avoir exactement le même résultat au niveau apparence du texte entre JS et PHP. PHP va incruster "graphiquement" le texte tandis que celui présent en JS ne sera que du texte en HTML, donc non graphique. Une solution serait de reproduire l'alphabet sous forme d'image (gif transparent) et de les placer pour être sûr d'avoir le même résultat. Il faut que je creuse cette idée...  

impressionnant !
ça me fait pleurer de voir ce que vous êtes tous capables de faire avec le web alors que j'arrive à peine à afficher un Hello World
(et même pas W3C Compliant en plus )