Convertir la couleur de l'image sans changer son fond transparent

Quelqu'un at-il une bonne solution pour changer la couleur d'un non-transparence, avec l'aide de HTML5 ou de la Toile (ou toute autre technologie HTML5).

J'ai googlé beaucoup et a trouvé une solution (avec de la Toile) qui peuvent changer la couleur d'une image,comme,

Comment puis-je la teinte d'une image avec HTML5 Canvas?

Toile - Changement de couleurs d'une image à l'aide de HTML5/CSS/JS?

Mais ces solutions aussi changer le fond transparent de la couleur donnée (que je ne veux pas).

Convertir la couleur de l'image sans changer son fond transparent

Son un stackoverflow image png avec un fond transparent. Maintenant, je veux changer de couleur de l'image sans affecter ses pixels transparents(arrière-plan), de sorte que je suis capable d'enregistrer une image encore avec l'aide de toile toDataURL méthode avec de nouvelles couleurs.

Je ne suis pas sûr de savoir si c'est possible, avec le HTML5 ou pas. Toute aide est très appréciée.

Merci d'Avance.

*******************ÉDITÉ*********************

Ajouté une nouvelle Image de la Pilule (capsule).

Convertir la couleur de l'image sans changer son fond transparent

source d'informationauteur Mohit Pandey

  1. 27

    Une Démo (voir la remarque à propos de cette démo ci-dessous): http://jsfiddle.net/m1erickson/2d7ZN/

    Convertir la couleur de l'image sans changer son fond transparent

    Vous pouvez obtenir un tableau contenant l'image RGBA données de pixels à l'aide de context.getImageData

    var imageData=context.getImageData(0,0,canvas.width,canvas.height);

var data=imageData.data;

    À partir de là, vous pouvez lire (et éventuellement modifier) la couleur de chaque pixel.

    La rgba tableau se présente comme ceci:

    //top-left pixel (x:0,y:0)

data[0]   red of pixel#0 (0-255)
data[1]   green of pixel#0 (0-255)
data[2]   blue of pixel#0 (0-255)
data[3]   alpha of pixel#0 (opacity: 0-255)

//next pixel (x:1,y:0)

data[4]   red of pixel#1
data[5]   green of pixel#1
data[6]   blue of pixel#1
data[7]   alpha of pixel#1

    Vous pouvez modifier le R,G,B ou Un composant d'un pixel en modifiant le tableau de données

    Par exemple, cela change le pixel supérieur gauche de solide rouge

    data[0]=255;   //red
data[1]=0;     //green
data[2]=0;     //blue
data[3]=255;   //alpha (opacity)

    Sur la transparence:

    La composante alpha de chaque pixel détermine que du pixel de la transparence. Si vous souhaitez uniquement modifier la plupart pixels opaques, alors vous pouvez facilement ignorer tous les pixels semi-transparents comme ceci:

    //alpha is 0-255
//ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent)

if( data[3]<200 ) { //don't process this pixel }

    Enfin, vous pouvez pousser vos modifications de pixels de retour sur la toile avec .putImageData

    context.putImageData(imageData,0,0);

    Remarque à propos de la Démo

    Il est difficile de "recolorier une image à l'aide de la toile par défaut de couleur RVBA régime.

    Donc cette démo convertit les données RVB de la couleur HSL régime. Cela permet à la "couleur" (hue) qui doit être modifié sans affecter les autres composantes du pixel (S=saturation de la couleur, L=légèreté de la couleur).

    Après le pixel est recolorée, qui a modifié LGV données est convertie en arrière à LED et enregistré dans le tableau de données.