Discussion :

[slider973]

Bonjour


Je souhaiterais réaliser une animation j'aimerais mettre un mug et j'aimerais qu'il change de couleur quand je sélectionne une couleur. Des amis m'ont dit que je devrais utiliser un filtre. Comment réaliser tout cela en JavaScript.

Cordialement

[SpaceFrog]

Un filtre

il y a pas mal de possibilité pour arriver a modifier la couleur d'un objet ...
- tu peux avoir une image par couleur si la liste de couleurs est définie et fixe
- tu peux avoir une image avec transparence et changer la couleur ou l'image de fond .
- tu peux tracer ton image sur un canvas ...
- tu peux appliquer un filtre sur une photo ( mais tu risque de rencontrer des soucis de compatibilité )
entre autres ..


Tout dépend en fait de ton image de départ et du rendu souhaité ...

[slider973]

je souhaiterais appliquer un filtre sur une photo même si je risque de rencontrer des soucis de compatibilité

voici mon images

[Bovino]

même si je risque de rencontrer des soucis de compatibilité

Si ce que tu veux, c'est appliquer un filtre qui permette de faire une découpe de l'image pour isoler le mug et en modifier la couleur, dans ce cas, je peux te rassurer : tu n'auras aucun problème de compatibilité et le comportement sera identique sur tous les navigateurs. Le seul problème que tu auras, c'est que ça ne marchera sur aucun...

[SpaceFrog]

Je pense qu'il parle d'un filtre de modification de couleur de la photo
http://www.paulund.co.uk/css3-image-filters

[Bovino]

Oui, c'est aussi ce à quoi je pensais, mais aucun filtre ne permet de ne cibler qu'une partie d'une image et d'en modifier la couleur.

[SpaceFrog]

si il y a juste le mug avec fond transparent ?

[Bovino]

Ca ne change rien... déjà, il n'y a pas de filtre pour changer de couleur, car si tu appliques un filtre pour changer une couleur d'une image, ça implique que toute l'image deviendra de cette couleur, pas uniquement les contours ou quoi que ce soit de spécifique.
Les seuls filtres qui existent, c'est pour appliquer des effets : flou, noir et blanc, nuances de gris, sepia. Mais rien qui ne puisse s'appliquer à la demande.

[SpaceFrog]

hue ?
http://davidwalsh.name/demo/css-filters.php

ça change bien la couleur ...

[danielhagnoul]

J'ai trouvé une piste intéressante, mais je n'ai pas le temps de l'exploiter, car il est temps d'aller en cuisine (un autre genre de programme)

Voir : http://stackoverflow.com/questions/2...ent-background
Démo : http://jsfiddle.net/m1erickson/2d7ZN/

[SylvainPV]

Je confirme, ça marche bien avec un canvas : http://jsfiddle.net/2d7ZN/209/

La partie délicate ça sera de délimiter la zone à colorier (ici le test est fait sur une plage de teinte 200<hue<300)

[NoSmoking]

Bonjour,

La partie délicate ça sera de délimiter la zone à colorier

tu peux passer par un "canvas map" contenant des 0-1

[slider973]

pourrais tu me montrer un exemple s'il te plait ?

Bonjour,
tu peux passer par un "canvas map" contenant des 0-1

[NoSmoking]

L'idée est de ne changer la couleur dans le canvas que pour les "pixels" à 1 par exemple, cette "map" peut être réalisé sur base d'une image en noir et blanc, un masque en fait.

Une autre approche serait d'avoir de la transparence sur l'image et correspondant à la partie devant être colorée. Sous cette image tu places un autre canvas qui portera la couleur à afficher, là plus de test c'est la transparence de l'image sur le devant qui fera le boulot, comme un masque.

Encore une autre approche serait de passer par une image SVG et de modifier la couleur des paths concernés.