Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1898 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Editeur d'image en JS (sisi...) TERMINE !!

 


 Mot :   Pseudo :  
 
 Page :   1  2  3  4  5
Page Précédente
Auteur Sujet :

Editeur d'image en JS (sisi...) TERMINE !!

n°627396
Hermes le ​Messager
Breton Quiétiste
Posté le 01-02-2004 à 00:00:38  profilanswer
 

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 !
 
 [:yaisse2]


Message édité par Hermes le Messager le 11-02-2004 à 23:14:26
mood
Publicité
Posté le 01-02-2004 à 00:00:38  profilanswer
 

n°627425
gizmo
Posté le 01-02-2004 à 00:16:33  profilanswer
 

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

n°627430
Hermes le ​Messager
Breton Quiétiste
Posté le 01-02-2004 à 00:18:24  profilanswer
 

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.

n°627494
cerel
Posté le 01-02-2004 à 01:21:45  profilanswer
 

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


Message édité par cerel le 01-02-2004 à 01:22:04
n°628397
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 12:45:29  profilanswer
 

!! UPDATED !!

n°628418
Kristoph
Posté le 02-02-2004 à 13:04:53  profilanswer
 

C'est sensé faire quoi ?

n°628421
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:07:46  profilanswer
 

Kristoph a écrit :

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

n°628424
Kristoph
Posté le 02-02-2004 à 13:10:53  profilanswer
 

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.

n°628425
EpoK
Let's burn
Posté le 02-02-2004 à 13:13:50  profilanswer
 

drapo

n°628434
chrisbk
-
Posté le 02-02-2004 à 13:22:39  profilanswer
 

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

mood
Publicité
Posté le 02-02-2004 à 13:22:39  profilanswer
 

n°628438
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:26:49  profilanswer
 

chrisbk a écrit :

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

n°628440
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:28:35  profilanswer
 

Kristoph a écrit :

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.


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

n°628442
chrisbk
-
Posté le 02-02-2004 à 13:29:16  profilanswer
 

Hermes le Messager a écrit :


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


 
ben change ta facon de dessiner ton rectangle ?

n°628443
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:32:49  profilanswer
 

chrisbk a écrit :


 
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.

n°628445
chrisbk
-
Posté le 02-02-2004 à 13:34:25  profilanswer
 

Hermes le Messager a écrit :


 
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 :D 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 ?)


Message édité par chrisbk le 02-02-2004 à 13:34:33
n°628452
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:37:11  profilanswer
 

chrisbk a écrit :


 
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 :D 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.  :whistle:  
 
Vous pensez que c'est réellement utile ?  :??:  

n°628455
chrisbk
-
Posté le 02-02-2004 à 13:38:20  profilanswer
 

Hermes le Messager a écrit :


 
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.  :whistle:  
 
Vous pensez que c'est réellement utile ?  :??:  
 


 
franchement ouais :o 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)
 

n°628457
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 13:40:26  profilanswer
 

chrisbk a écrit :


 
franchement ouais :o 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.  :jap:  Merci pour les remarques.

n°628615
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 15:41:50  profilanswer
 

chrisbk a écrit :

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


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

n°628758
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 18:19:41  profilanswer
 

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.

n°628763
Kristoph
Posté le 02-02-2004 à 18:22:24  profilanswer
 

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

n°628768
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 18:25:23  profilanswer
 

Kristoph a écrit :

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 ?  [:totozzz]

n°628769
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 18:27:39  profilanswer
 

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

n°628770
gizmo
Posté le 02-02-2004 à 18:37:19  profilanswer
 

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

n°628776
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 18:54:48  profilanswer
 

gizmo a écrit :

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


 
Avec Opera ? Volontier .  :)

n°628778
gizmo
Posté le 02-02-2004 à 18:59:16  profilanswer
 

http://olivier.hubaut.info/bug.jpg

n°628781
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 19:11:38  profilanswer
 

[:ddr555]
 
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. [:ddr555]
 
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... :/

n°628782
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 19:14:58  profilanswer
 

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

n°628784
chrisbk
-
Posté le 02-02-2004 à 19:18:13  profilanswer
 

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


Message édité par chrisbk le 02-02-2004 à 19:18:26
n°628786
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 19:20:23  profilanswer
 

chrisbk a écrit :

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 [:ddr555]
 
ça a été une autre paire de manche avec mon éditeur bb-code like avec la prévisualisation intégrée. [:ddr555]

n°628837
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 21:02:54  profilanswer
 

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

n°628840
gizmo
Posté le 02-02-2004 à 21:04:32  profilanswer
 

nickel :jap:

n°628939
Kristoph
Posté le 02-02-2004 à 21:51:45  profilanswer
 

hermes le messager a écrit :


 
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 ?  [:totozzz]  


 
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 :D

n°628981
Sh@rdar
Ex-PhPéteur
Posté le 02-02-2004 à 22:11:33  profilanswer
 

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

n°629061
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 22:55:20  profilanswer
 

Merci pour les compliments, mais c'est loin d'être terminé.
 
J'en suis qu'à la recherche fondamentale là... [:ddr555]
 
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 [:ddr555] et ensuite, je vous explique pas la panique pour sérialiser tout ça et traiter le truc avec PHP en dessinant point par point).

n°629087
karamilo
Posté le 02-02-2004 à 23:14:26  profilanswer
 

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

n°629091
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2004 à 23:16:45  profilanswer
 

karamilo a écrit :

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


 
C'est gentil, mais je pense pouvoir y arriver  :D  

n°629150
Sh@rdar
Ex-PhPéteur
Posté le 03-02-2004 à 00:42:01  profilanswer
 

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

n°629151
Hermes le ​Messager
Breton Quiétiste
Posté le 03-02-2004 à 00:46:36  profilanswer
 

Sh@rdar a écrit :

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

n°629155
Harkonnen
Modérateur
Un modo pour les bannir tous
Posté le 03-02-2004 à 00:49:50  profilanswer
 

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 :sweat:
(et même pas W3C Compliant en plus [:sisicaivrai])


---------------
J'ai un string dans l'array (Paris Hilton)
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3  4  5
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Editeur d'image en JS (sisi...) TERMINE !!

 

Sujets relatifs
Editeur en JS pour admin de site...Chemin image
Insérer une fonction de validation sur un bouton image d'un formulaireSéparer une image en plusieurs lien
envoie d'image dans un repertoireImage en fond de div
Ouvrir un image dans une fentre a la taille ?Aligner verticalement une image puis un texte dans une cellule
faire un editeur HTML en Javascript..pistes??[php] Dde infos pour faire des liens à partir d'image , nvlle question
Plus de sujets relatifs à : Editeur d'image en JS (sisi...) TERMINE !!


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR