Remplacer la couleur sur une image en temps réel

Question

Je vais d'abord expliquer ma situation afin que vous puissiez mieux connaître mon problème. Je fais une application HTML5. J'ai une toile, et en utilisant un sélecteur de couleur, vous pouvez changer la couleur de la toile. Maintenant, j'ai une image que je veux mettre sur la toile, mais que la couleur des images doit être changé en utilisant un sélecteur de couleur. Donc, je dois remplacer, disons, la couleur noire sur cette image et le mettre sur la toile afin qu'il dosnt le fond.

Donc, ça va ressembler à ceci:
1er couleur picker- change la couleur de la toile
2e sélecteur de couleur - remplace la couleur noire sur l'image avec celle du sélecteur de couleur et il met sur la toile

Maintenant, mon problème est de savoir comment remplacer la couleur sur l'image sans recharger la page. Ma seule condition est de ne pas utiliser silverlight, flash, java ou toute autre technologie similaire nécessitant l'installation d'un logiciel tiers sur l'appareil.

Merci d'avance. Si vous ne comprenez pas complètement ma requête, n'hésitez pas à demander.

Answer 1

Mon approche avec une seule solution JS pourrait être:

• Loading the image l'intérieur d'un élément de toile. Look at the MDC canvas tutorial

• Trigger l'utilisateur clique sur la toile et obtenir la couleur de pixel (voir les liens ci-dessous pour savoir comment obtenir la couleur d'un pixel) et regarder this answer to get the mouse position

• Remplacez toutes les couleurs de la toile celui choisi par l'utilisateur. Pour quelques exemples sur la manipulation de pixels:

  • Pushing pixel with canvas at Mozilla Hacks
  • http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
  • Ce JS at mezzoblue apply heavy filter to an image

Après une expérience de toile Je remarque que la plupart du temps dans tout le navigateur la manipulation de pixels avec la toile pourrait soyez très lent aussi avec de petites images. Donc, une autre expérience à faire pourrait être d'obtenir la couleur du pixel, puis:

• passer les informations de couleur à un PHP (ou un autre script côté serveur) avec un appel AJAX
• faire la manipulation des couleurs avec une bibliothèque d'images comme GD ou imagemagik
• retourner votre image avec la réponse Ajax
• rechargez votre toile avec la version modifiée de l'image