Wir schauen uns in diesem Tutorial an, wie sich die Bilddaten in einem Canvas-Element für jeden einzeln Pixel verändern lassen.
Das Canvas Element
Für dieses Tutorial werden Grundlagen in der Sprache JavaScript und Grundlagen mit dem HTML5-Element Canvas vorausgesetzt. Canvas Grundlagen findest Du auch in diesem Canvas Grundlagen Tutorial.
Ausgangslage und Ziel des Tutorials
Das Tutorial beginnt mit einer bereits zum Teil vorbereiteten kleinen Webanwendung. Wir wollen ein Tool entwickeln, mit dem sich eine bestimmte Farbe in einem hochgeladenen Bild, durch eine andere Farbe ersetzen lässt. Das ganz soll auch mit einer einstellbaren Toleranz funktionieren. Die Oberfläche des Tools ist schon vorbereitet. Das Bild kann auch bereits über einen File-Dialog geladen werden und wird bereits ins Canvas gezeichnet.
index.html
style.css
main.js
Im obigen JavaScript werden bereits die Bilddaten aus dem Canvas gelesen, dies geschieht nach dem Laden des Bildes mit der Methode ctx.getImageData(). Die Variable imageData enthält als die Bilddaten, die zu Begin geladen wurden.
Mit dieser Vorarbeit ergibt sich folgende Ausgangssituation für das Tutorial:
Die Bilddaten clonen und Farbwerte Pixelweise auslesen
Wir legen eine neue Funktion an, die zur Manipulation der Bilddaten dient, und clonen zunächst die Bilddaten, denn wir wollen natürlich nicht die Originaldaten immer wieder verändern. Dies würde dazu führen, das wir uns immer wieder auf zuvor bereits manipulierte Daten beziehen, diese Funktion ist natürlich nicht gewünscht.
Die Farbwerte originalColor und replaceColor bekommen wir vom Input-Element als Hexadezimalangabe. Es gilt nun, diese in RGB-Werte umzurechnen. Dazu eine kleine Funktion:
Im Objekt "clonedData" befindet sich das Array "data", das die Bilddaten für jeden einzelnen Pixel hält. Es so aufgebaut: [ r, g, b, alpha, r, g, b, alpha, r, g,b, alpha ... usw. ] d.h. die RGB-Werte und der Alphakanal für jeden Pixel folgen hintereinander weg.
Deshalb durchlaufen wir das data-Array via For-Schleife und erhöhen die Laufvariable nach jedem Schritt um 4. Dann holen wir uns die Farbwerte aus dem Array, Alpha können wir ignorieren, denn wir benötigen Alpha hier nicht. Die Funktion "replace" sieht nun bis hierher so aus:
Bilddaten verändern und zurück ins Canvas zeichnen
Im nächsten Schritt müssen wir herausfinden, welche Pixel durch eine andere Farbe ersetzt werden müssen. Dafür errechnen wir im ersten Schritt den Abstand zwischen den Farbwerten des jeweiligen Pixels und der Originalfarbe.
Wenn dieser Abstand kleiner oder gleich der eingestellten Toleranz ist, ersetzen wir die Farben (RGB) des Pixels mit denen von "replaceColor".
Nach Durchlauf der Schleifen müssen die geänderten Daten nur noch ins Canvas zurück geschrieben werden. Dazu dient uns die Methode ctx.putImageData(). Die fertige "replace"-Funktion sieht also so aus:
Wir sind fertig, unsere Anwendung ist in der Lage einzelne Farben eines Bildes zu ersetzen.
Fazit, Möglichkeiten und Schwächen des Codes
Du bist nun in der Lage jeden Pixel eines Canvas zu verändern, damit hast du alle Möglichkeiten der Bildmanipulation. Egal ob einfache Filter oder komplexe Bildbearbeitung, Greenscreen oder sonstiges - mit dem Bild ist nun alles möglich!
Zusammen mit der Möglichkeit auch Videos in ein Canvas zu rendern, ergeben sich beeindruckende Möglichkeiten - in einem Browser wohlgemerkt!
Unser Quellcode hat eine Schwäche, pro Pixel muss auf 4 Werte (inkl. Alpha) zugegriffen werden. Das könnte durch die Verwendung eines 32-Bit-Arrays auf einen Zugriff pro Pixel reduziert werden. In diesem Grundlagen-Tutorial ist aber der gewählte Ansatz völlig ausreichen. Wollte man ein Uint32Array verwenden, könnte man das beispielhaft so machen: