Ändern der Farben eines Bildes mit HTML5/CSS/JS?

Question

Gibt es eine Möglichkeit, Farben eines Bildes ähnlich wie in Flash/ActionScript mit nur HTML5/CSS/JavaScript zu ändern?

Hier ist ein Beispiel in Flash: http://www.kirupa.com/developer/actionscript/color.htm

Meine Vermutung wäre, dass es so weit mit Leinwand, nur möglich ist, weiß ich; aber ich würde gerne wissen, ob es eine andere Lösung gibt, die auch IE7 & IE8 unterstützt, ohne die Notwendigkeit, ein Google-Plugin für IE zu installieren.

Answer 1

Es hängt davon ab, was Sie versuchen zu tun.

Wenn Sie nur ein Bild mit einer Farbe überlagern möchten, können Sie ein DIV auf die Oberseite legen, das ein teilweise transparentes PNG der gewünschten Farbe als Hintergrundbild hat. Hier ist ein JS Fiddle Demonstrieren:

http://jsfiddle.net/btCfK/

Ich habe nicht eine Kopie des IE 7 praktisch zu überprüfen, aber ich bin mir ziemlich sicher, das wird in älteren IEs arbeiten (später als 6 sowieso).

In diesem Beispiel wird eine feste Größe für das Overlay und das Bild verwendet. Mit etwas cleverem Programmieren könnten Sie das ändern und ein JavaScript-basiertes Steuerelement erstellen, um Farben ein- oder auszublenden.

Wenn Sie etwas anspruchsvoller als das wollen, ist es wahrscheinlich nicht praktisch ohne ein Canvas-Element, SVG oder eine Menge JavaScript zu verwenden.

Answer 2

Ich bin gerade über diese Frage gestolpert und ich dachte, ich würde CSS filters erwähnen.

Zur Zeit unterstützt nur Chrome sie vollständig (http://caniuse.com/#feat=css-filters), aber die Dinge könnten sich in Zukunft verbessern.