Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Leinwand von Anfang: Pixelmanipulation

by
Read Time:12 minsLanguages:
This post is part of a series called Canvas From Scratch.
Canvas From Scratch: Transformations and Gradients

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Im letzten Artikel haben Sie alles über Transformationen, Schatten und Verläufe erfahren. Heute werde ich Ihnen zeigen, wie Sie Pixel auf Leinwand bearbeiten. Vom einfachen Zugriff auf Farbwerte bis zur Bearbeitung von Bildern auf der Leinwand wie bei einem Fotoeditor.

Dies ist mit Sicherheit eine der leistungsstärksten Funktionen, die direkt in die Leinwand integriert sind. Sobald Sie sie gelernt haben, garantiere ich Ihnen, dass Sie eine ganze Reihe aufregender Ideen haben.


Einrichten

Sie werden dieselbe HTML-Vorlage aus den vorherigen Artikeln verwenden. Öffnen Sie also Ihren bevorzugten Editor und kopieren Sie den folgenden Code:

Dies ist nichts weiter als eine einfache HTML-Seite mit einem canvas-Element und etwas JavaScript, das nach dem Laden des DOM ausgeführt wird. Nichts verrücktes.


Platzieren eines Bildes auf der Leinwand

Sie können Pixel mit allem bearbeiten, was auf die Leinwand gezeichnet ist. Für dieses Tutorial verwenden Sie jedoch Bilder. Dies liegt zum Teil daran, dass es wichtig ist, Ihnen zu zeigen, wie Sie Bilder in die Leinwand laden, aber auch daran, dass die Fähigkeit zur Bildmanipulation (z. B. zum Bearbeiten von Fotos) ein großer Pluspunkt dieser Technologie ist.

Bevor ich Ihnen zeige, wie Sie auf Pixelwerte zugreifen, platzieren Sie ein Bild auf der Leinwand. Sie können jedes gewünschte Bild verwenden, aber für dieses Beispiel werde ich eines meiner eigenen Fotos von Flickr verwenden.

One of my photos from FlickrOne of my photos from FlickrOne of my photos from Flickr

Sie haben die Erlaubnis, dieses Foto zu verwenden, wenn Sie möchten, das Sie in verschiedenen Größen herunterladen können.

Das Laden eines Bildes in die Leinwand erfordert zwei Schritte. Das erste besteht darin, das Bild in ein HTML-image element zu laden. Dies kann mithilfe von HTML oder durch Erstellen eines neuen DOM-Elements direkt in JavaScript erfolgen. In diesem Beispiel erstellen Sie ein neues DOM-Element - ganz einfach:

Sie erstellen hier lediglich ein neues Image-DOM-Element und weisen es einer Variablen zu. Sie verwenden diese Variable dann, um Ihr Bild zu laden, indem Sie das src-Attribut des Bildes auf den richtigen Pfad setzen. Es ist erwähnenswert, dass Sie mit dieser Technik ein Remote-Image laden können. Dies wirft jedoch einige Probleme für uns auf, sodass wir uns vorerst an ein lokal gespeichertes Image halten. Der letzte Schritt besteht darin, auf das load ereignis zu warten, das ausgelöst wird, sobald das Bild vollständig geladen wurde und zur Verwendung verfügbar ist.

Sobald das Bild geladen wurde, können Sie es in einem einfachen Schritt auf der Leinwand platzieren. Sie müssen lediglich die soeben erstellte image variable an einen Aufruf an die drawImage-Methode des 2d-Renderkontexts übergeben. Platzieren Sie im image Ladeereignis

In diesem Fall akzeptiert die drawImage-Methode drei Argumente; ein Bildelement sowie die x- und y-Koordinatenwerte, um das Bild auf der Leinwand zu platzieren. Dadurch wird das Bild in voller Größe (500 Pixel für dieses Bild) und an der angegebenen Position gezeichnet:

Placing an imagePlacing an imagePlacing an image

drawImage kann jedoch zwei weitere Argumente verwenden, die die Breite und Höhe definieren, um das Bild zu zeichnen:

Dies würde das Bild mit der halben Originalgröße zeichnen (250px für dieses Bild):

Placing and resizing an imagePlacing and resizing an imagePlacing and resizing an image

Sie können sogar noch einen Schritt weiter gehen und die vollständigen neun Argumente für drawImage verwenden, um nur einen kleinen Teil des Originalbilds zu zeichnen, wie folgt:

Dies würde ein 200px-Quadrat von oben links im Bild nehmen und es mit einem 500px-Quadrat auf die Leinwand zeichnen:

Placing only part of an imagePlacing only part of an imagePlacing only part of an image

Im Pseudocode können die vollständigen neun drawImage-Argumente folgendermaßen beschrieben werden (s bedeutet Quelle und d bedeutet Ziel):

Das Ergebnis ist in der folgenden Abbildung dargestellt:

Taking drawImage to the extremeTaking drawImage to the extremeTaking drawImage to the extreme

Einfach, richtig? Ehrlich gesagt ist nichts auf Leinwand so kompliziert, wenn man es einmal zerlegt und die Teile einzeln betrachtet.


Zugriff auf Pixelwerte

Nachdem Sie ein Bild auf der Leinwand haben, ist es Zeit, auf die Pixel zuzugreifen, damit Sie sie bearbeiten können. Vergessen wir jedoch vorerst, sie zu manipulieren, und konzentrieren uns nur darauf, auf sie zuzugreifen, da das Konzept eine Weile braucht, um sich zurechtzufinden.

Sicherheitsprobleme

Wenn Sie über Canvas auf Pixel zugreifen möchten, müssen Sie die damit verbundenen Sicherheitsbeschränkungen kennen. Mit diesen Einschränkungen können Sie nur auf die Daten von Bildern zugreifen, die in derselben Domäne wie das JavaScript geladen sind. Dies verhindert, dass Sie von einem Remote-Server aus auf ein Bild zugreifen und dann dessen Pixel analysieren, obwohl es eine Möglichkeit gibt, es zu umgehen. Leider behandeln nicht alle Browser JavaScript und Bilder, die lokal vom Dateisystem (dh ohne Domainnamen) ausgeführt werden, wie unter derselben Domain, sodass möglicherweise Sicherheitsfehler auftreten. Um dies zu umgehen, müssen Sie den Rest dieses Lernprogramms entweder in einer lokalen Entwicklungsumgebung (wie MAMP, WAMP oder XAMPP) oder auf einem Remote-Webserver ausführen und über einen Domänennamen (wie example.com) auf die Dateien zugreifen.

Wenn das aus dem Weg ist, lasst uns weitermachen und uns ein paar Pixel holen!

Der Zugriff auf Pixel ist etwas seltsam

Wie ich am Anfang dieses Abschnitts erwähnt habe, dauert es eine Weile, bis Sie auf Pixelwerte in der Leinwand zugreifen können. Dies liegt an der Art und Weise, wie die Pixel auf der Leinwand gespeichert werden. Sie werden überhaupt nicht als ganze Pixel gespeichert! Stattdessen werden Pixel jeweils in vier separate Werte (Rot, Grün, Blau und Alpha) unterteilt, und diese Werte werden in einem eindimensionalen Array mit allen Farbwerten für die anderen Pixel gespeichert. Aus diesem Grund können Sie die Daten nicht einfach von einem bestimmten Pixel anfordern, zumindest nicht standardmäßig. Lassen Sie mich erklären.

Um auf Pixel im Canvas-Bereich zuzugreifen, müssen Sie die getImageData-Methode des 2D-Rendering-Kontexts aufrufen:

Diese Methode verwendet vier Argumente, die einen rechteckigen Bereich der Zeichenfläche beschreiben, von dem die Pixeldaten stammen sollen. ein x- und y-Ursprung, gefolgt von einer width und height. Es gibt ein CanvasPixelArray zurück, das alle Farbwerte für die Pixel innerhalb des definierten Bereichs enthält. Das erste, was beim CanvasPixelArray auffällt, ist, dass jedes Pixel vier Farbwerte hat, sodass der Index des ersten Farbwerts für jedes Pixel innerhalb des Arrays ein Vielfaches von 4 ist (0 für den ersten Wert des ersten Pixels, 4 für der erste Wert des zweiten usw.):

Index values in the CanvasPixelArrayIndex values in the CanvasPixelArrayIndex values in the CanvasPixelArray

Das Interessante an diesem Array (oder ärgerlich, je nachdem, wie Sie es betrachten) ist, dass es kein Konzept für die (x, y) -Koordinatenposition gibt, was bedeutet, dass das Abrufen von Farbwerten für ein bestimmtes Pixel etwas schwieriger ist als der Zugriff auf zwei. dimensionales Array (z. B. Verwenden von pixelArray [0][3], um auf das Pixel bei (1, 4) zuzugreifen). Stattdessen müssen Sie eine kleine Formel verwenden, die tatsächlich sehr einfach zu verstehen ist, sobald sie richtig erklärt wurde:

Accessing a specific pixel from the CanvasPixelArrayAccessing a specific pixel from the CanvasPixelArrayAccessing a specific pixel from the CanvasPixelArray

Können Sie herausfinden, was hier passiert? Lassen Sie es uns aufschlüsseln und so tun, als ob wir die Pixelfarbwerte für das innerste Pixel in einem 3x3-Pixelraster erhalten möchten - das Pixel bei (2, 2).

Wenn Sie sich die beiden vorherigen Bilder ansehen, können Sie sehen, dass die Farbwerte für dieses Pixel bei Index 16 beginnen. Um dies jedoch mit Code zu berechnen, müssen Sie zwei Dinge tun. Berechnen Sie zuerst den Index am Anfang der Zeile, auf der sich das Pixel befindet (die y-Position), und fügen Sie dann diesem Index die Anzahl der Farbwerte hinzu, die zwischen dem Pixel und dem Anfang der Zeile (der x-Position) vorhanden sind. Es ist ein bisschen nervenaufreibend, aber ertrage es.

Der erste Teil ist einfach, Sie wissen bereits, dass es vier Farbwerte pro Pixel gibt, und Sie kennen bereits die Breite des Rasters (3 Pixel). Um den Index des Pixels in Zeile y (2) zu berechnen, führen Sie diese Werte durch den ersten Teil der Formel, der folgendermaßen aussehen würde:

Dies gibt Ihnen einen Index von 12, der mit dem ersten Pixel in der zweiten Zeile in den vorherigen Bildern übereinstimmt. So weit, ist es gut.

Der nächste Schritt besteht darin, die Anzahl der Farbwerte zu berechnen, die vor dem gewünschten Pixel in dieser Zeile vorhanden sind. Dazu multiplizieren Sie einfach die Anzahl der Pixel vor der gewünschten mit vier. Einfach. In diesem Fall würde der zweite Teil der Formel folgendermaßen aussehen:

Sie können alles herausfinden, wenn Sie möchten, aber die Antwort lautet 4, was, wenn Sie zum vorherigen Wert addiert werden, einen Index von 16 ergibt. Cool, ja?

Ich würde mir keine Sorgen machen, es vollständig zu verstehen. Ich weiß nur, dass diese erstaunliche kleine Formel existiert, damit Sie den Index des roten Farbwerts für jedes Pixel leicht erhalten können. Um den Index der anderen Farbwerte eines Pixels (grün, blau oder alpha) zu erhalten, fügen Sie dem berechneten Index einfach 1, 2 oder 3 hinzu.

Dies in die Praxis umsetzen

Nachdem Sie nun wissen, wie Sie ein beliebiges Pixel erfassen können, setzen wir dies in die Praxis um und erfassen Farbwerte aus einem Bild, um die Farbe eines Website-Hintergrunds zu ändern. Diese Art von Technik eignet sich hervorragend als Farbwähler für eine Webanwendung zur Fotobearbeitung.

Der Code für dieses Beispiel ist ziemlich einfach. Lassen Sie uns also alles auf einmal angreifen:

Sie erkennen die ersten Zeilen aus den vorherigen Beispielen. Das gesamte neue Material befindet sich im Klick-Handler auf dem canvas-Element, der mit ein wenig jQuery anzeigt, wann auf den Canvas geklickt wurde.

Innerhalb des Klick-Handlers möchten Sie das Pixel ermitteln, mit dem die Maus auf die Leinwand geklickt hat. Dazu müssen Sie zuerst den Versatz in Pixel der oberen linken Position der Zeichenfläche vom oberen linken Rand des Browserfensters berechnen. Hierfür können Sie die jQuery-offset methode verwenden. Sie können dann auf das auf der Leinwand angeklickte Pixel schließen, indem Sie den Versatz von der Mausposition des Klickereignisses (pageX und pageY) subtrahieren. Sie sollten auf jeden Fall einige Zeit damit verbringen, sich über das JavaScript-Klickereignis zu informieren, wenn Sie dies besser verstehen möchten.

In den folgenden vier Zeilen wird das CanvasPixelArray für die Zeichenfläche (getImageData) erfasst, in einer Variablen gespeichert, der Index des roten Farbwerts für das angeklickte Pixel ermittelt, indem er mit der zuvor angezeigten Formel berechnet wird, und anschließend die Pixelfarbwerte gespeichert als CSS-rgba-Zeichenfolge. Schließlich besteht der letzte Schritt darin, die Hintergrundfarbe des body elements auf die des angeklickten Pixels einzustellen.

Creating a basic color pickerCreating a basic color pickerCreating a basic color picker

Und damit sind Sie fertig. Probieren Sie es selbst aus; Klicken Sie auf das Bild auf der Leinwand und beobachten Sie, wie der Hintergrund der Website seine Farbe ändert. Wenn dies nicht funktioniert, stellen Sie sicher, dass Sie die Demo auf einem Server mit einem Domänennamen ausführen, wie im Abschnitt zu Sicherheitsproblemen beschrieben.

Es war eine lange Reise, aber Sie können jetzt schnell und einfach die Farbwerte aller Pixel auf der Leinwand abrufen. Habe ich dir gesagt, dass du auch die Farbwerte von Pixeln auf der Leinwand ändern kannst? Ich habe nicht? Hoppla! Schauen wir uns das jetzt an, es ist absolut cool.


Anwenden von Effekten auf Bilder

Jetzt, da Sie auf die Pixelfarbwerte der Leinwand zugreifen können, ist das Ändern dieser Werte ein Kinderspiel. Das Ändern dieser Farbwerte ist in der Tat so einfach wie das Ändern der Werte im CanvasPixelArray und das anschließende Zurückzeichnen auf die Leinwand. Schauen wir uns an, wie das geht.

Der erste Schritt besteht darin, den Code wie im vorherigen Abschnitt einzurichten. Dieser Code lädt ein Bild, zeichnet es auf die Leinwand und erfasst dann die Pixeldaten:

So weit, ist es gut. Der nächste Schritt besteht darin, jedes Pixel auf der Leinwand zu durchlaufen und seine Farbwerte zu ändern. In diesem Beispiel werden Sie die Farben invertieren, indem Sie den aktuellen Farbwert (0 bis 255) von 255 abziehen:

Hier ist nichts Verrücktes los; Sie multiplizieren einfach die Pixelzahl (i) mit 4, um den Index des roten Farbwerts für dieses Pixel im CanvasPixelArray zu erhalten. Durch Hinzufügen von 1 oder 2 zu dieser Zahl können Sie die grünen bzw. blauen Farbwerte abrufen und ändern.

Schließlich müssen Sie jetzt nur noch die Zeichenfläche löschen (um das normale Bild zu entfernen) und dann die putImageData-Methode des 2D-Renderkontexts verwenden, um das gespeicherte CanvasPixelArray auf die Zeichenfläche zu zeichnen:

Und das ist ehrlich gesagt alles, was dazu gehört. Laden Sie Ihren Browser neu und überzeugen Sie sich selbst. Cool, nicht wahr?

Inverting the pixels of an imageInverting the pixels of an imageInverting the pixels of an image

Dinge einpacken

Pixelmanipulation auf Leinwand bietet noch viel mehr, aber ich hoffe, dass Sie in diesem Artikel genug Erfahrung haben, um Ihre Säfte zum Fließen zu bringen. Ich ermutige Sie, diesen Bereich weiter zu erkunden und zu sehen, was Sie sonst noch mit Pixeln tun können. Warum? Denn alle Techniken, die Sie zur Pixelmanipulation gelernt haben, können sowohl für HTML5-Videos als auch für Bilder verwendet werden. Das ist cool!

Im nächsten Artikel, dem letzten in dieser Reihe, werden wir die Leinwand anders betrachten. Dieses Mal lernen Sie, wie Sie auf der Leinwand animieren. Dadurch erhalten Sie die Grundlagen zum Erstellen von Cartoons, Animationen und Spielen. Dies ist zweifellos meine Lieblingsverwendung von Leinwand.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.