Comment changer la couleur d'une image à l'aide de jquery
Tout d'abord je suis désolé pour la question stupide, je vais demander. J'ai une image d'une tasse. Lorsqu'un utilisateur sélectionne un code de couleur à partir d'un sélecteur de couleur, je veux tourner la couleur de la tasse à la couleur.
Vous s'il vous plaît de bien vouloir me donner un indice sur la façon de le faire à l'aide de jquery? J'ai l'intention de réaliser cela à l'aide de PHP et Jquery.
Merci d'Avance 🙂
P. S Il vient de se produire pour moi que ce n'est pas possible de changer la couleur d'un objet à l'aide d'un sélecteur de couleur, si elle est dans un format d'image mais il y a obtenu d'être un moyen d'y parvenir. Veuillez s'il vous plaît de bien vouloir me suggérer quelque chose?
- Pourriez-vous nous montrer le fichier image? Dépendamment de la complexité, il peut être possible d'obtenir de bons résultats en utilisant de la toile.
- merci de vous répondre. J'ai essayé de télécharger l'image, mais stackoverflow.com ne pas laisser les me... dit que j'ai besoin de plus de 10 réputation. Toutefois, j'ai téléchargé l'image pour tinypic. Voici le lien i42.tinypic.com/20zz140.jpg 🙂 merci encore
- Je vous ai donné crois que le lien de mon image. Pensez-vous à l'aide de "Toile" fera l'affaire pour moi. Parce que vous verrez la couleur de mon mug est blanc.. si un utilisateur utilise un sélecteur de couleur et prend la couleur rouge et la modification de l'esprit immédiatement choisit jaune.. la couleur de la tasse va à son tour jaune+rouge. Il ne remplacera pas le rouge avec le jaune. S'il vous plaît corrigez-moi si je me trompe. merci 🙂
- Oh oui, ça fera l'affaire, j'ai été un peu occupé, je suis en train de travailler sur mon droit de réponse maintenant. Voulez-vous qu'il soit rouge+jaune ou juste le jaune dans ce cas? Il peut être fait de toute façon que vous voulez.
- Je veux juste qu'il soit jaune et vous avez déjà fait pour moi. 🙂 Merci l'homme de votre temps. 🙂
Vous devez vous connecter pour publier un commentaire.
Ok, première étape, au lieu d'utiliser le format jpeg, vous allez utiliser le format PNG si vous pouvez avoir des zones transparentes sur l'image.
L'ouvrir dans un éditeur d'image et découper toutes les zones blanches de l'image, laissant la tasse avec un contour transparent. Comme ceci:
Nous n'allons pas utiliser jQuery ici parce que honnêtement, je ne sais rien à ce sujet donc je ne peux pas vous aider, au lieu de cela, nous allons utiliser directement l'API de canevas de HTML 5 (ce qui signifie que votre application ne fonctionnera pas sur les anciens navigateurs)
Ici, nous allons effectuer une couleur par pixel de la multiplication, depuis votre mug est en échelle de gris qui va le faire pour nous.
Prenons un tableau contenant tous les pixels de la couleur de l'information.
Obtenir les pixels de données à l'aide de la
getImagedata
méthode, à l'intérieur de l'événement onload de l'image<*img src="mug.png" id="mug" width="25%" height="25%" onload="getPixels(this)" />
Nous avons besoin de la couleur dans le sélecteur de couleur pour être dans le format RGB, pas de hex, afin d'utiliser cette fonction dans le cas où votre sélecteur retourne une valeur hexadécimale à convertir:
Maintenant, ici, c'est la magie de la partie, nous allons faire une boucle par les données de pixel et de le multiplier à la couleur dans le sélecteur de couleurs.
sur mon script il n'y a pas de sélecteur de couleur, je viens de créer une simple saisie de texte pour taper le code hexadécimal de la couleur, cette fonction ci-dessous est l'événement onclick d'un bouton d'entrée de
Voir, le truc, c'est:
Vous pouvez le constater ici: http://users7.jabry.com/overlord/mug.html
Je suis sûr qu'il fonctionne au moins sur firefox et chrome.
La tasse de contour ne sont pas bonnes, c'est parce que je viens de faire un rapide "baguette magique" sur photoshop, vous pouvez faire quelque chose de mieux plus tard.
<div class="mug"> </div>
et dans le css j'ai.mug{background-image:url(mug.png); }
est-il possible de changer le fond de couleur de l'image à l'aide d'une méthode similaire? ou cette un tbp?document.querySelector("#mug").style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
Vous pouvez utiliser un knock-out à l'image d'une tasse avec des zones transparentes, de lui donner un arrière-plan et modifier la couleur de l'arrière-plan, comme l'exige. cssTricks
Voici un exemple de base, jsFiddle, à l'aide de Farbtastic Sélecteur De Couleur.
Vous devez utiliser
"Produit Coloriseur"par Nik Korablin. Il prend en charge une ou deux couleurs, et est simple à mettre en place.Vous pourrait recouvrir une position absolue .png avec un z-index supérieur à celui de l'image de base de la tasse. La superposition serait la couleur de la tasse et pourrait avoir de l'arrière-plan knoced si nécessaire. Swap de la superposition en tant que de besoin par l'intermédiaire d'un gestionnaire d'événement - peut-être ajouter/supprimer une classe?