Bildfarbe konvertieren, ohne den transparenten Hintergrund zu ändern

Question

Hat jemand eine gute Lösung, um die Farbe eines nicht transparenten Bereichs mithilfe von HTML5 oder Canvas (oder einer anderen HTML5-Technologie) zu ändern.

gegoogelt ich viel und fand einige Lösung (mit Canvas), die die Farbe eines Bildes ändern können, wie,

How do i tint an image with HTML5 Canvas?

Canvas - Change colors of an image using HTML5/CSS/JS?

Aber diese Lösung auch den transparenten Hintergrund ändern die angegebene Farbe (die ich nicht will).

Es ist ein Stackoverflow mit transparentem Hintergrund PNG-Bild. Jetzt möchte ich die Bildfarbe ändern, ohne seine transparenten Pixel (Hintergrund) zu beeinflussen, so dass ich in der Lage bin, ein Bild wieder mit Hilfe der Leinwand toDataURL Methode mit neuer Farbe zu speichern.

Ich bin mir nicht sicher, ob es mit HTML5 möglich ist oder nicht. Jede Hilfe wird sehr geschätzt.

Vielen Dank im Voraus.

******************* EDITED *********************

Added neues Bild von Pille (Kapsel).

Answer 1

Eine Demo (siehe zu diesem Demo-Hinweis unten): http://jsfiddle.net/m1erickson/2d7ZN/

Sie ein Array erhalten kann das Bild des RGBA-Pixeldaten enthält, unter Verwendung von context.getImageData

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

var data=imageData.data; 

Von dort können Sie die Farbe jedes Pixels lesen (und optional ändern).

Der RGBA-Array wird wie folgt angelegt:

// 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 

Sie können die R, G, B ändern oder eine Komponente eines jeden Pixels durch die Datenarray ändernden

Zum Beispiel dies ändert die oberen linken Pixel zu festen roten

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

über Transparenz:

Die Alpha-Komponente jedes Pixels bestimmt die Transparenz dieses Pixels.Wenn Sie nur meist undurchsichtigen Pixel ändern möchten, dann können Sie bequem alle halb-transparente Pixel wie diese ignorieren:

// 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 } 

Schließlich können Sie Ihre geänderte Pixel zurück auf die Leinwand schieben mit .putImageData

context.putImageData(imageData,0,0); 

Hinweis über die Demo

Es ist schwierig, „umfärben“ ein Bild, das Standard RGBA-Farbschema der Leinwand verwenden.

Also diese Demo konvertiert die RGB-Daten in das HSL-Farbschema. Dadurch kann die "Farbe" (Farbton) geändert werden, ohne die anderen Komponenten des Pixels zu beeinflussen (S = Sättigung der Farbe, L = Helligkeit der Farbe).

Nachdem das Pixel neu eingefärbt wurde, werden diese modifizierten HSL-Daten zurück in RGBA konvertiert und im Datenarray gespeichert.