Changer de la couleur d'une image

Bonjour à tout le monde .désolé si ma question est au mauvais endroit mais je pensais que JavaScript ferai bien l'affaire.enfait je voulais dans un site web développer un module qui permet d'agir sur les couleurs d'une image
Concrètement,dans une usine de fabrication de chaussure par exemple, il est possible de faire en plusieurs couleurs .lors de la commande via le site,l'internaute doit donc choisir la couleur de sa chaussure .il y'a donc une image de chaussure dispo,et je voudrai mettre à côté un champs de type color qui permet de choisir la couleur et voir instantanément le résultat sur l'image.
Je ne sais pas si c'est stupide mais j'aimerai vraiment apprendre à faire un truc du genre donc svp aidez moi

Cordialement.

Bonjour,
je n'ai pas complètement compris la question, il y aurait une liste de couleurs à sélectionner, c'est ça ?

Sinon si il faut choisir parmi toutes les couleurs possibles et imaginables, regarde cette doc : https://developer.mozilla.org/en-US/...on_with_canvas

Il te suffirait d'afficher la dite image dans un canvas et de changer les pixels correspondants selon la couleur choisie !

Merci lefou123456 pourront intérêt. En fait la liste de fouleurs est une possibilité mais je pensais à un champ de type color dans un formulaire HTML.il permet d'afficher une palette de couleur à choisir grâce à la souris comme dans les logiciels comme word mar exemple.

en fait tu veux faire une sorte de colorPicker avec un choix limité.

Des ColorPicker il y en a des milliers, regarde le code de l'un d'entre eux et arrange le à ta sauce.

Merci.je n'en ai jamais entendu parler .je me lance dans la recherche et je te reviens.

https://github.com/search?q=colorPicker

ou utiliser "free javascript color picker " sur Google image

Bonjour,

je doute qu'un colorpicker soit suffisant...


1- Si c'est ça que tu cherches :

• https://www.porsche.com/france/models/718/ (pour un modèle, cliquer sur "Configurer")
• Dans le "configurateur" : on peut changer les couleurs, les accessoires,...

... alors bon courage...

2- Sinon, le plus simple (et le plus communément utilisé sur les sites de vente) :

• tu affiches une photo différente pour chaque couleur !
• (exemple : https://www.zalando.fr/new-look-mape...1e04q-k11.html)

Merci à tous et à toi Jreaux62 particulièrement. Le premier lien que t'as lassé pour les voitures c'est exactement ce que je veux.tu vois comment on agis sur les couleurs de l'image des voitures dans les paramètres c'est excitant :-)

@jreaux62

En l’occurrence le configurateur de Porsche fait un get a chaque clic sur une couleur pour aller chercher diverses infos sur leur API + les assets qui vont bien (voiture de coté, dessus, intérieur, .... à la bonne couleur).

Et je te rejoints sur le fait que le plus simple/utilisé et d'avoir une image par couleur (voir une sprite avec toute les images/couleurs).

Après tu peux peux aussi pousser le vice en jouant sur les calques si tu as plusieurs couleurs à changer sur une image même configuration (genre devant la chaussure en rouge et l'arrière en noir).

Merci justement j'ai plusieurs couleurs à changer la semelle et le haut de la chaussure doivent avoir une couleur différente du genre noir en haut et rouge en bas.
C'est le plus embêtant

Il est beaucoup plus facile de changer la couleur sur une image (sur un logiciel de traitement d'image) que de s'amuser à le faire dans le code :).

Prend la solution la plus rapide :

• Fait une image pour toutes les couleurs que tu souhaites proposer.
• Stock ça dans une BDD
• Fait un web service pour appeler l'image en fonction de la couleur souhaité
• Fais le call que tu souhaites depuis ton javascript (en séléctionnant dans une dropdown par exemple)

En espérant t'avoir aidé ;)

1- Pour créer des variantes d'une même photo, avec différentes couleurs (trouvé sur le web) :

• Changer la couleur d'un élément avec Photofiltre
• Comment changer la couleur d’un objet dans Photoshop ?
• [Tutoriel]Changer la couleur d'un objet sous photoshop
• ...

2- Mais je persiste : le plus SIMPLE et RAPIDE est de faire des photos des "vrais" produits" (avec leur couleur réelle).


3- Concernant Porsche :
je pense que les photos des voitures sont d'abord réalisées en images de synthèse (ce qui demande des moyens techniques et financiers conséquents).
Une fois générées, il est alors plus "facile" de changer les textures, couleurs, accessoires... et de générer des images et/ou calques.

Si tu sais faire ça...

Merci beaucoup à tous pour l'intérêt porté à ma question.je crois que je vais finir par adopté la solution '' optimal'' que vous proposez c.a.d une image pour chaque modèle ou changer les couleurs avec photoshop