Incrustation de couleur d'image dans HTML5/JS

Question

J'ai certains vecteurs png avec des arrière-plans transparents que je veux superposer en couleur à la volée, afin que les utilisateurs puissent choisir un vecteur puis choisir la couleur qu'ils veulent d'un sélecteur. La seule condition est qu'ils ne peuvent pas être masqués avec des couleurs d'arrière-plan, car plusieurs png seront chargés sur le même canevas et devront se chevaucher.

Comment puis-je charger une image dans un canevas et la superposer avec une certaine couleur?

Edit: J'ai trouvé quelques informations here et here (- réponse par Nathan) quel genre de travail, mais pas dans tous les navigateurs.

Le second en particulier que j'ai besoin que le .png lui-même pour être overlay et le transparencey rester transparent

Answer 1

Pratiquement vous voulez charger l'image en toile et la superposition avec une certaine couleur, qui donnera un effet de couleur à l'image globale.

Ce plugin jQuery fait exactement cela, il charge l'image dans la toile, manipule la couleur donnant le bel effet de teinte et la convertit en élément d'image. Convertir ceci en élément d'image est une partie très importante, car certains utilisateurs peuvent styler leur base CSS sur l'élément img, au lieu de l'ID ou de la classe.

Il suffit de jouer avec le demo interactif:

et passer par le docs:

Amusez-vous.