[CREATION] Hermeshop : BANQUE/EDITEUR d'images en JS.

Hermeshop : BANQUE/EDITEUR d'images en JS. [CREATION] - HTML/CSS - Programmation

Marsh Posté le 28-07-2006 à 11:47:58    

Et bien oui, c'est reparti.
 
Ceux qui sont présent depuis assez longtemps sur ce forum ont vu passer mon premier éditeur d'image qui permettait de redimensionner/cropper/supperposer des images présentes sur votre serveur, le tout graphiquement.
 
Cette fois-ci le projet est bcp plus ambitieux.
 
Il sera également possible de peindre/retoucher/dessiner et plus des fonctions habituelles et indispensables.
 
Cet éditeur d'image s'appuiera sur une banque d'image en cours de développement que vous pouvez déjà tester ici.  
 
Au niveau explorateur, les features :
 
- Supporte les formats : JPEG/PNG et GIF (pour les serveurs qui le supportent) le script détectera automatiquement les fonctions GD supportées et s'adaptera en conséquence (pas encore fait).
- Upload d'images (fait - incomplet)
- Propriétés de l'image sélectionnée. (fait)
- Effacement. (fait)
- Renommage. (fait)
- Actualisation (fait)
- Tri par noms, types, taille et date de modification (fait)
- Visualisation sous forme de :
 
- vignettes (fait)
- liste (fait)
- diaporama (fait)
 
- Aide fournie (pas encore fait).
 
 
La version professionnelle (non gratuite) gèrera en plus les dossiers et supportera le glisser déposer des images dans les dossiers. Elle permettra en outre d'enregistrer des préférences.
En outre, elle sera capable de détecter les images utilisées par vos scripts et les rendre non sélectionnables pour éviter l'effacement.
Elle sera également multilingue.
 
 
Au niveau de l'éditeur d'images à proprement parlé, voilà ce qui est prévu pour la version gratuite :
 
- Depuis l'explorateur, on pourra créer une image ou modifier une image sélectionnée.
- Couper/coller/copier des zones de l'image.
- Crop.
- retoucher pixel par pixel l'image en cours (avec une loupe).
- tracer des lignes, carrés (cercle en cours d'études).
 
Pour la version professionnelle :  
 
- On pourra écrire, uploader et gérer de nouvelles polices.
- On pourra connaitre la couleur d'un pixel sélectionné.
 
 
Pour le test de ce qui existe déjà, vous pouvez regarder ça :
 
http://tousleschats.free.fr/hermes [...] eshop.html
 
NB : les gifs ne sont pas supportés (limitation de free).
NB : les images trop grosses ne seront pas uploadée (vous aurez une erreur (toujours à cause de free)).
NB : les features liées à l'éditeur d'image (nouvelle image et modifier) ne sont pas encore disponibles.
 
 
Signalez moi tout bug. Le script est compatible tout navigateur récent digne de ce nom en théorie. Cependant, il n'a pas été encore testé sur SAFARI.
 
Dites moi également quelle feature vous voudriez voir pour l'éditeur d'image, si quelque chose vous parait important que j'aurais oublié (dans la mesure où c'est réalisable).


Message édité par Hermes le Messager le 29-07-2006 à 12:33:29
Reply

Marsh Posté le 28-07-2006 à 11:47:58   

Reply

Marsh Posté le 28-07-2006 à 11:55:42    

tu es un grand malade :D
 
bon courage :hello:


---------------
La musique c'est comme la bouffe, tu te souviens du restaurant dans lequel t'as bien mangé 20 ans plus tôt, mais pas du sandwich d'il y a 5 minutes :o - Plugin pour winamp ©Harkonnen : http://harko.free.fr/soft
Reply

Marsh Posté le 28-07-2006 à 11:57:06    

Sh@rdar a écrit :

tu es un grand malade :D
 
bon courage :hello:


 
 
T'as testé le diaporama ?

Reply

Marsh Posté le 28-07-2006 à 11:57:14    

beau boulot , ça me rappelle quil faut que je me développe un explorateur permettant d uploader X photos sur un serveur
 
;)

Reply

Marsh Posté le 28-07-2006 à 11:58:54    

Hermes le Messager a écrit :

T'as testé le diaporama ?


 
 
je suis en train, mais ça rame :sweat: (free powa)
 
c'est sympa, même si je suis pas un grand fan de ce genre de truc (je préfère cliquer comme un fou sur suivant pour que ça aille plus vite et rester longtemps sur une photo qui me plait)


---------------
La musique c'est comme la bouffe, tu te souviens du restaurant dans lequel t'as bien mangé 20 ans plus tôt, mais pas du sandwich d'il y a 5 minutes :o - Plugin pour winamp ©Harkonnen : http://harko.free.fr/soft
Reply

Marsh Posté le 28-07-2006 à 12:00:12    

Sh@rdar a écrit :

je suis en train, mais ça rame :sweat: (free powa)
 
c'est sympa, même si je suis pas un grand fan de ce genre de truc (je préfère cliquer comme un fou sur suivant pour que ça aille plus vite et rester longtemps sur une photo qui me plait)


 
ouai free c'est tout pourri. Je vais reprendre un nom de domaine et un hébergement pour l'occasion. :o
 
Un détail : un double clic sur une vignette ouvre la photo dans le diaporama. ;)

Reply

Marsh Posté le 28-07-2006 à 12:07:08    

oui ça j'avais vite trouvé (sans, ça sert pas à grand chose tron truc [:joce] )


---------------
La musique c'est comme la bouffe, tu te souviens du restaurant dans lequel t'as bien mangé 20 ans plus tôt, mais pas du sandwich d'il y a 5 minutes :o - Plugin pour winamp ©Harkonnen : http://harko.free.fr/soft
Reply

Marsh Posté le 28-07-2006 à 12:08:31    

Sh@rdar a écrit :

oui ça j'avais vite trouvé (sans, ça sert pas à grand chose tron truc [:joce] )


 
Faut encore que je fasse sous forme de liste. [:spamafote]
 
Le diaporama, c'était plus pour le fun que pour autre chose. J'ai laissé la possibilité dans le diaporama de sélectionner directement une image avec le sélect. ;)

Reply

Marsh Posté le 28-07-2006 à 12:12:25    

han j'avais pas vu le menu du haut en fait :whistle:
 
CHAPEAU :jap:
 
et ça marche même sous IE 5.0 [:joce]


---------------
La musique c'est comme la bouffe, tu te souviens du restaurant dans lequel t'as bien mangé 20 ans plus tôt, mais pas du sandwich d'il y a 5 minutes :o - Plugin pour winamp ©Harkonnen : http://harko.free.fr/soft
Reply

Marsh Posté le 28-07-2006 à 12:14:26    

Sh@rdar a écrit :

han j'avais pas vu le menu du haut en fait :whistle:
 
CHAPEAU :jap:
 
et ça marche même sous IE 5.0 [:joce]


 
Ah ouai quand même... J'ai peut être eu tord de vouloir rester trop classique.  :whistle:

Reply

Marsh Posté le 28-07-2006 à 12:14:26   

Reply

Marsh Posté le 28-07-2006 à 12:22:39    

nan mais je suis distrait (par ce putain de mal de dents :fou:) :ange:


---------------
La musique c'est comme la bouffe, tu te souviens du restaurant dans lequel t'as bien mangé 20 ans plus tôt, mais pas du sandwich d'il y a 5 minutes :o - Plugin pour winamp ©Harkonnen : http://harko.free.fr/soft
Reply

Marsh Posté le 28-07-2006 à 15:14:21    

wah respect :sweat:
 

Reply

Marsh Posté le 28-07-2006 à 15:25:50    

mIRROR a écrit :

wah respect :sweat:


 
Oh, c'est rien ça.  :whistle:  Le meilleur arrivera dans les prochains jours...  :whistle:  Je teste pas mal de chti trucs avant de commencer réellement l'éditeur d'image. Tout le problème concerne les modifications à apporter à l'image au niveau du serveur (savoir QUAND apporter les modifications) et s'arranger pour obtenir un fonctionnement quasi-transparent.

Reply

Marsh Posté le 28-07-2006 à 15:30:32    

soit t'as tout pété, soit ça marche pas du tout sous ie7 béta 3 :/
(ceci dit, j'ai déjà trouvé un méga bug avec ie7b3 donc c'est pas forcément une référence ;))
 
Edit : pas mal :jap:
 
Sous Moz ça marche, et ça promet d'être sympa :)

Message cité 1 fois
Message édité par Arjuna le 28-07-2006 à 15:34:00
Reply

Marsh Posté le 28-07-2006 à 15:57:25    

Arjuna a écrit :

soit t'as tout pété, soit ça marche pas du tout sous ie7 béta 3 :/
(ceci dit, j'ai déjà trouvé un méga bug avec ie7b3 donc c'est pas forcément une référence ;))
 
Edit : pas mal :jap:
 
Sous Moz ça marche, et ça promet d'être sympa :)


 
Tu peux me dire ce qui marche pas sous IE 7b3 ?   :??:  
 
ça m'intéresse... Dis moi au passage si la console JS geule et quelles sont les erreurs signalées. Merci. J'espère en particulier que ça concerne pas la sécurité en particulier pour l'upload avec mon Iframe cachée.  :heink:  

Reply

Marsh Posté le 28-07-2006 à 16:12:02    

ben...
=> on voit le menu, mais il n'est pas actif
=> au centre, y'a un cadre rose avec rien dedans
=> et puis c'est tout, on ne peut rien faire :D

Reply

Marsh Posté le 28-07-2006 à 16:15:49    

TAIST
 
=> bon, pourtant le JS marche sur IE7b7
 
J'ai même des erreurs JS sur le forum, et pourtant ça marche.
Alors que sur ton site, j'ai pas d'erreur, mais tout reste figé :D

Reply

Marsh Posté le 28-07-2006 à 16:51:33    

Arjuna a écrit :

TAIST
 
=> bon, pourtant le JS marche sur IE7b7
 
J'ai même des erreurs JS sur le forum, et pourtant ça marche.
Alors que sur ton site, j'ai pas d'erreur, mais tout reste figé :D


 
 
Ya pas d'erreur JS signalées quelque part ? J'imagine que ça vient peut être de mon appel à xmlhttprequest.  
 

Code :
  1. function getHTTPObject()
  2. {
  3.  var xmlhttp;
  4.  /*@cc_on
  5.  @if (@_jscript_version >= 5)
  6.  try
  7.  {
  8.   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" );
  9.  }
  10.  catch (e)
  11.  {
  12.   try {
  13.    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );
  14.   }
  15.   catch (E)
  16.   {
  17.    xmlhttp = false;
  18.   }
  19.  }
  20.  @else
  21.  {
  22.   xmlhttp = false;
  23.  }
  24.  @end @*/
  25.  if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
  26.  {
  27.   try
  28.   {
  29.    xmlhttp = new XMLHttpRequest();
  30.   }
  31.   catch (e)
  32.   {
  33.    xmlhttp = false;
  34.   }
  35.  }
  36.  return xmlhttp;
  37. }


 
essaye d'utiliser ça à l'occasion et dis moi si ça passe...

Reply

Marsh Posté le 28-07-2006 à 17:05:16    

comment ça "j'essaie d'utiliser ça" ?

Reply

Marsh Posté le 28-07-2006 à 17:26:26    

les commentaires "conditionnels" pour IE...
ça question est de savoir si ça marche encore sous IE ou s'il créé bien le connection avec l'objet XMLHttpRequest

Reply

Marsh Posté le 28-07-2006 à 22:15:37    

Bon, Voir en tant que liste fonctionne maintenant.
 
L'explorateur en lui-même (pour la version gratuite) est terminée (manque juste l'aide).
 
Vous pouvez tester.
 
A partir de demain j'attaque l'éditeur d'image à proprement parler. :o

Reply

Marsh Posté le 29-07-2006 à 08:02:21    

Bugs corrigés :
 
- Tout sélectionner est pris en compte au niveau du bouton effacer.
- Quand une image est sélectionnée, le diaporama part de cette image et se déroule sans problème (ce qui n'était pas le cas).

Reply

Marsh Posté le 29-07-2006 à 12:18:30    

drapal :o
ça en est où, ton editeur ?
j'ai fait un truc qui permettait de cropper, redimensionner les images, graphiquement, c'est assez simple, si ce n'est deja fait, je veux bien aider :D

Reply

Marsh Posté le 29-07-2006 à 12:20:06    

phenxdesign a écrit :

je veux bien aider :D


 
une version payante est prevue [:cupra]

Reply

Marsh Posté le 29-07-2006 à 12:22:21    

phenxdesign a écrit :

drapal :o
ça en est où, ton editeur ?
j'ai fait un truc qui permettait de cropper, redimensionner les images, graphiquement, c'est assez simple, si ce n'est deja fait, je veux bien aider :D


 
ça va avancer progressivement. Suis ce topic régulièrement si ça t'intéresse. [:spamafote]
 
j'envisage aussi de mettre quelques filtres comme blur qui ont l'air de marcher pas mal...
 
Sinon, ça fera bcp plus que redimensionner les images hein... C'est un vrai éditeur d'image que je prépare, avec copier/coller, possibilité de retouche + d'autres choses...
 
Tu peux déjà tester l'explorateur sur lequel va s'appuyer l'éditeur d'image...
 
Sinon, merci pour ton aide, mais ça ira.  :D  

Reply

Marsh Posté le 29-07-2006 à 12:24:16    

mIRROR a écrit :

une version payante est prevue [:cupra]


 
Elle n'aura pas grand chose en plus en fait, mais sera utilisable en prod, maintenue et pourra gérer les dossiers par exemple... Elle n'intéressera que ceux qui veulent quelque chose de performant intégrable à des sites dynamiques professionnels...
 
Dans un premier temps, je vais bcp plus insister sur la version gratuite de toutes façons. [:spamafote]

Reply

Marsh Posté le 29-07-2006 à 12:26:49    

c etait juste pour dire que tu avais l air de te debrouiller seul :D

Reply

Marsh Posté le 29-07-2006 à 14:51:16    

Hermes le Messager a écrit :

ça va avancer progressivement. Suis ce topic régulièrement si ça t'intéresse. [:spamafote]
 
j'envisage aussi de mettre quelques filtres comme blur qui ont l'air de marcher pas mal...
 
Sinon, ça fera bcp plus que redimensionner les images hein... C'est un vrai éditeur d'image que je prépare, avec copier/coller, possibilité de retouche + d'autres choses...
 
Tu peux déjà tester l'explorateur sur lequel va s'appuyer l'éditeur d'image...
 
Sinon, merci pour ton aide, mais ça ira.  :D


ouais, mais ça doit le faire, entre autres :D
si t'as que l'explorateur, ya encore du boulot :D
ce que tu veux faire, en fait, c'est regrouper plein de fonctionnalités qu'on trouve par ci par là, alors il faut des ptis morceaux comme je te proposais  [:petrus75]

Reply

Marsh Posté le 29-07-2006 à 15:01:52    

Reply

Marsh Posté le 29-07-2006 à 15:48:59    

phenxdesign a écrit :

ouais, mais ça doit le faire, entre autres :D


 
Tu n'es pas ici depuis assez longtemps, je l'avais déjà fait. Un topic en atteste. ;)
 

Citation :

si t'as que l'explorateur, ya encore du boulot :D


 
Clairement, mais mon but c'est de faire un produit fini qui s'appuie sur un explorateur facile à exploiter. Jusqu'à présent, ce qu'on trouve c'est du bricolage.
 

Citation :

ce que tu veux faire, en fait, c'est regrouper plein de fonctionnalités qu'on trouve par ci par là, alors il faut des ptis morceaux comme je te proposais


 
De toutes manières, merci car toute info est toujours bonne. Je compte bien tout programmer et tout concevoir moi-même en réutilisant le moins possible l'existant, sauf dans des castrès particulier comme les filtres.

Reply

Marsh Posté le 29-07-2006 à 15:52:15    

hum ok, mais tu peux t'aider des liens que je t'ai donnés, parce que les librairies de Walter Zorn sont tres bien faites, proposent des fonctions de base, et assez anciennes, donc peu de bugs sont encore presents
mais apres, c'est toi qui juge :D

Reply

Marsh Posté le 29-07-2006 à 15:55:27    

phenxdesign a écrit :

je commence a apporter ma petite contribution :
si tu ne connais pas deja : http://www.walterzorn.com/ qui propose des librairies  JS :


Je ne vois pas de rêglage concernant l'épaisseur des traits. Et puis en fait, les ellypses et les cercles, c'est pas ma priorité, mais je regarderai tout de même comment ils ont fait.
 


Pas besoin de lien pour tirer ou on veut un div en absolute. ;) Mon colorpicker le montre bien. C'est basique et facile.


Dans mon cas inutile, mais je vais quand même regarder.


Oui, c'est utile. Merci pour le lien.
 
Ce qui m'intéresse avant tout et que j'ai déjà mis au point, c'est un système pour retravailler les images point par point dans le cadre d'un échange régulier entre mon module en JS et un module sur le serveur via xmlhttprequest.
 
Pour une fois que c'est intéressant à utiliser...  
 
Sinon, quand tu dis que j'ai pas fini si j'ai que l'explorateur, certe... Mais tu en connais bcp des explorateurs comme celui-là ?  :whistle:  

Reply

Marsh Posté le 29-07-2006 à 16:02:41    

nan j'en connais aucun [:petrus75]
 
pour l'epaisseur des traits :  

setStroke(Number);
 
Specifies the thickness of the drawing "pen" for lines and bounding lines of shapes. Once set, this thickness will be used by the subsequently called drawing methods until it will be overridden through another call of setStroke(). Default line thickness is 1 px, as long as .setStroke() has not yet been invoked.
 
To create dotted lines, setStroke() requires the constant Stroke.DOTTED as argument. Width of dotted lines is always 1 pixel.


la lib drag & drop permet plus que du drag & drop (http://www.walterzorn.com/dragdrop/commands_e.htm)
tu pourrais meme faire un editeur en mode vectoriel avec ça :D

Reply

Marsh Posté le 29-07-2006 à 16:10:10    

phenxdesign a écrit :

nan j'en connais aucun [:petrus75]
 
pour l'epaisseur des traits :  

setStroke(Number);
 
Specifies the thickness of the drawing "pen" for lines and bounding lines of shapes. Once set, this thickness will be used by the subsequently called drawing methods until it will be overridden through another call of setStroke(). Default line thickness is 1 px, as long as .setStroke() has not yet been invoked.
 
To create dotted lines, setStroke() requires the constant Stroke.DOTTED as argument. Width of dotted lines is always 1 pixel.


la lib drag & drop permet plus que du drag & drop (http://www.walterzorn.com/dragdrop/commands_e.htm)
tu pourrais meme faire un editeur en mode vectoriel avec ça :D


 
Mon but n'est quand même pas de créer un outil bezier. ;) Faut pas déconner, oui, ça doit être faisable, mais c'est pas du tout mon but. En l'occurence, mon but, c'est de pouvoir facilement retravailler des images POUR et seulement POUR le web, donc essentiellement pouvoir corriger par exemple des couleurs sur une petite surface, faire des copier coller avec une image, superposer des calques etc...
C'est un mode pixel qui m'intéresse le plus et intéressera le plus grand nombre, car pour par exemple créer des bordures pour un site web, c'est ce mode qui est intéressant...
C'est pour cela que du moins dans un premier temps, je ne vais pas m'intéresser bcp aux cercles, elypses etc...
 
Faut pouvoir recadrer, cropper, copier/couper, coller, appliquer un ou deux filtres basiques, corriger la couleur, le contraste/luminosité etc..., connaitre la couleur au sein d'une image à un point x,y etc... et le tout regroupé dans un outil très pratique à utiliser "à la sauce image editor normal".

Reply

Marsh Posté le 29-07-2006 à 16:17:53    

ok, je comprends :o
un peu comme FCKeditor pour faire des pages HTML donc ...
 
bonne chance pour ton projet :)

Reply

Marsh Posté le 29-07-2006 à 16:20:14    

phenxdesign a écrit :

ok, je comprends :o
un peu comme FCKeditor pour faire des pages HTML donc ...
 
bonne chance pour ton projet
:)


 
Voilà exactement. (d'ailleurs, quand j'en aurais fini avec cet éditeur, je compte bien redévelopper un module pour entrer du texte à la FCKeditor, mais en bien moins lourd et surtout produisant du bbcode et non du (X)HTML. :o )

Reply

Marsh Posté le 30-07-2006 à 12:21:23    

Bon cette fois ci, l'explorateur est complêtement fini. J'attaque l'éditeur d'image en lui-même. La relation explorateur - editeur est établie.

Reply

Marsh Posté le 30-07-2006 à 12:22:42    

tres bien :o
je vais tester ton explorateur
on te laisse bosser :D

Reply

Marsh Posté le 30-07-2006 à 22:05:05    

impressionnant ce truc [:wam]


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 31-07-2006 à 10:46:06    

ouaw !! tres jolie la demo :love:  
 
dommmage qu'il y est que la version pro qui gere les dossiers :cry:  
 
on peux l'avoir le script ? :D

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed