JavaScript Fun: Baue eine App mit Fotoeffekten!

1. Willkommen beim Kurs!: Hey, willkommen in dieser Klasse. Wenn Sie ein Webentwicklungsanfänger sind und einfach nur einspringen und einige lustige Projekte erstellen möchten, Sie bei uns genau richtig. Die Idee hinter dieser Serie ist es, Ihnen zu zeigen, was Sie mit normalem HTML, CSS und JavaScript tun können . Ich verwirre keine Frameworks, keine Boilerplate, irgendwelche Bibliotheken oder irgendwelche Vorlagen. Stattdessen werden wir alles komplett von Grund auf neu erstellen, Schritt für Schritt, um Ihnen zu zeigen, wie diese kostenlosen Technologien alle zusammenarbeiten. Mit diesem Projekt werden wir eine Foto-Effekt-Anwendung erstellen. Es geht um die Erstellung eines Foto-Uploaders, wo wir das Bild von unserem Computer auswählen können. Ich wähle eine gerade hier aus, und sobald wir dies öffnen, wird diese Datei dann im Browser angezeigt. Dies ist das Originalbild und dann auf der rechten Seite haben wir einige Optionen, um den Effekt zu ändern. Wir können das ändern, um Graustufen zu sein. Wir können Dinge wie einen Sepia-Effekt hinzufügen. Wir können die Farben invertieren. Bilder bestehen aus Pixeln, bei denen es sich um rote, grüne und blaue Werte handelt. Wir haben auch einige Optionen, um die Reihenfolge dieser Farben zu wechseln. Dies gibt uns einen schönen aussehenden Effekt, der das Aussehen unserer Bilder wirklich verändern kann. Sobald wir fertig sind und wir haben ein schönes Bild, das Sie verwenden möchten, können wir auch dieses Bild herunterladen. Dieses Projekt gibt Ihnen die Chance, viele neue Dinge zu lernen. Wir werden eine Benutzeroberfläche mit HTML erstellen. Wir werden dann Styling mit CSS hinzufügen. Aber der Schwerpunkt in diesem Video wird das JavaScript sein, und auch die Arbeit mit Pixeln. Sie werden lernen, wie Sie Bilder hochladen, Dateileser-Objekte erstellen, wie Sie auf die HTML-Leinwand zeichnen. Sobald wir dieses Bild in der Leinwand haben, werden Sie lernen, wie Sie alle Pixel aus diesem Bild lesen. Wir werden dann alle diese Pixel durchlaufen und verschiedene Effekte anwenden. Wir werden auch lernen, wie Sie das Originalbild wiederherstellen und auch die geänderte Version herunterladen können. Wenn das wirklich komplex klingt, mach dir keine Sorgen. Dieser Kurs ist für Anfänger konzipiert. Allerdings wäre wenig JavaScript-Wissen ein echter Vorteil, und idealerweise sollte dies das fünfte Projekt sein , das Sie von diesem JavaScript aus Serie nehmen. Alle anderen Projekte sind auch hier auf Skillshare verfügbar. Es wäre wirklich von Vorteil, diese Klassen in Ordnung zu nehmen. Hoffe, du bist jetzt aufgeregt, diese Fotoeffekte aufzubauen und ich sehe dich in der Klasse. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen , nur um das Ende einer Vorlesung zu beenden. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken, und du kannst sogar einen Schritt zurücktreten , wenn du den Kurs beendet hast und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare Ich werde es mir nur ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt finden Sie auf der Registerkarte Projekt und Ressourcen Dort können Sie nicht nur Ihr Projekt hochladen, sondern auch andere Klassenprojekte sehen. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. So erstellst du die Benutzeroberfläche: Willkommen zu unserem nächsten Projekt, welches die Foto-Effekt-Anwendung ist. Die Benutzeroberfläche wird relativ unkompliziert sein, insbesondere im Vergleich zu einigen der anderen Projekte. Alles, was wir tun werden, ist eine Sidebar auf der rechten Seite zu erstellen. Dies wird eine Reihe von Schaltflächen haben, die einen Effekt auf ein Foto erzeugen , das hochgeladen wird. Wir können voran gehen und die Datei auswählen, ein Bild auswählen, und dann wird dies im Browser angezeigt. Dann haben Sie eine Reihe von Effekten. Wir können dies zu einem Graustufeneffekt machen. Wir können diese Effekte klären. Wir haben invertiert, wir haben den Sepia-Effekt, und dann haben wir eine Reihe von Tasten, die um unsere roten, grünen und blauen Werte wechseln werden. Dies wird uns einige verschiedene Effekte wie diese geben. Das wird uns einen mehr roten Farbton geben. Ein Effekt, den dies hat, wird auf jedem Bild ziemlich anders sein. Um dies zu tun, werden wir alle Pixel auf dem Bild austauschen, um uns diese schön aussehenden Effekte zu geben. Wir haben auch die Möglichkeit, dieses Bild herunterzuladen. Wir können auf diesen Button klicken. Dies wird dann das Bild herunterladen, das wir verwenden können. Wie bei jedem der Projekte in diesem Kurs können Sie ein Bild Ihrer Wahl verwenden. Oder wenn Sie das gleiche Bild verwenden möchten, das ich für dieses Projekt verwendet habe, gehen Sie zum GitHub-Repository, und dann können Sie in die Photo Effects-Anwendung gehen, wo Sie nicht nur den Beispielcode sehen, sobald dies hochgeladen, sondern auch das Bild, das ich während dieses Kurses verwende. Um loszulegen, werde ich das herunterladen. Klicken Sie auf den Bildnamen, klicken Sie auf „Download“. Wir können dann mit der rechten Maustaste, „Speichern“ unser Bild. Ich werde das auf dem Desktop speichern. Wir brauchen auch einen Projektordner. Gehen wir zurück zu unserem Desktop, New Folder, der die Fotoeffekte sein wird. Ziehen Sie dies in unseren Visual Studio-Code und stellen Sie dann sicher, dass unser Bild innerhalb unseres Projektordners verfügbar ist. Ziehen wir das über und legen Sie es in unseren Projektordner. Schritt eins wird sein, eine neue Datei zu erstellen, die für unsere Indexseite ist. Dies wird die index.html sein. Wir können das dann im Browser öffnen, den Pfad dazu kopieren, diesen einfügen, und wir sind gut zu gehen. Beginnen wir mit unserer HTML-Struktur. Wie immer werde ich den Befehl html:5 verwenden, der in Visual Studio Code integriert ist. Der Dokumenttitel ist die Fotoeffekte-App. Dann im Inneren des Körpers werden wir den gesamten Fotobereich innerhalb des Hauptelements umgeben . Dann haben wir den beiseite Abschnitt , der unsere Sidebar sein wird. Dies ist für alle unsere Buttons und den Bild-Upload. Der Hauptabschnitt wird ziemlich unkompliziert sein. Dies ist einfach der Bereich, der unser Bild im Browser anzeigen wird. Die Art und Weise, wie wir dies tun, besteht darin, ein Canvas-Element zu erstellen. Eine Leinwand ist ein HTML-Element, das wir verwenden, um unsere Bilder zu zeichnen. Es kann verwendet werden, um fast jede Art von Grafiken aus Linien und Formen, Fotos, reifen Früchten, komplexen, 3D-Objekten zu zeichnen , obwohl wir in diesem Kurs nur auf die 2D-Funktionen zugreifen, genauer gesagt auf den 2D-Kontext und wir Werfen Sie einen Blick auf dies im Detail in der JavaScript. Wir müssen ein Canvas-Element und dann eine ID erstellen, die auch Canvas sein wird. Dies ist nur so können wir dieses Element in unserem JavaScript auswählen, und dann können wir unsere Bilder zeichnen. Weiter oben den beiseite Abschnitt , der unseren Uploader und unsere Buttons enthalten wird. Der erste Abschnitt wird ein div mit der Klasse des Eingabe-Wrapper sein. Dies wird der Abschnitt sein, der unser Label und auch den Datei-Uploader haben wird . Das Label für diese Eingabe hat eine ID des Uploaders und dann den Text der Auswahldatei. Danach wird eine Eingabe und der Eingabetyp dafür Datei mit der ID des Uploaders sein. Wir können dies dann innerhalb unseres JavaScript verwenden und dies passt auch zu unserem Label direkt oben. Als nächstes können wir nach unserem Eingabe-Wrapper ein zweites div erstellen. Dieses div wird die Klasse der Effekte haben. Dies wird der Bereich sein, in dem wir alle Effekte mit diesen Schaltflächen auswählen. Die erste Schaltfläche, dies wird den Graustufeneffekt auslösen. Die zweite Taste, dies ist für den Sepia-Effekt. Der dritte wird für Invert sein. Die vierte, dies wird der Anfang der vier Tasten sein, die wir um unsere roten, grünen und blauen Werte wechseln werden. Der erste wird das Rot, Grün und Blau in Rot, Blau und Grün umwandeln . Lassen Sie uns dies duplizieren, um vier Schaltflächen zu erstellen. Wir werden immer mit der RGB-Farbe beginnen. Die linke Seite wird immer gleich sein. Für die zweite Taste wird dies jedoch auf blau, grün und rot umgeschaltet. Der nächste wird grün sein, blau dann rot. Die vierte Kombination, die wir verwenden werden, ist grün, rot und dann blau. Wenn diese Farbkombination, die ich umschalte im Moment keinen Sinn ergibt, ist das in Ordnung. Dies wird alles deutlicher, wenn wir einen Blick auf Pixel im JavaScript-Abschnitt werfen. Nach unserem Effektbereich werden wir ein neues div erstellen. Dieses div wird die Klasse der Steuerelemente haben und dies wird unsere klaren und auch unsere Download-Buttons haben. Die erste von klaren und die zweite ist, so dass unser Benutzer dieses Bild herunterladen kann. Geben Sie dies ein Speichern, oder wir könnten dies sogar mit unserem Live-Server öffnen wenn Sie dies während dieses Projekts verwenden möchten. Lasst uns das aufmachen. Gehen Sie zu Ansicht und zur Command Palette, wo wir einen Blick auf unseren Live-Server werfen können und wir können dies mit unserer Live-Server-Erweiterung öffnen. Jetzt im Browser haben wir eine ziemlich schrecklich aussehende Anwendung, aber der gesamte Inhalt ist vorhanden. Lassen Sie es uns im nächsten Video stylen. 4. Design mit CSS: Es ist in Ordnung, denn dieses Projekt wird ziemlich unkompliziert sein. Wir werden nur eine Hintergrundfarbe erstellen und dann einige Farben zu unseren Schaltflächen zusammen mit einigen Responsive Layout hinzufügen . Da das Styling ziemlich unkompliziert ist, werde ich dies einfach über den Anfang unserer Indexseite beginnen. Nur innerhalb des Kopfabschnitts können wir den Stilabschnitt erstellen, und wenn Sie diese getrennt halten möchten und platziert in einem separaten Stylesheet. Der HTML-Code wird verwendet, um die Basisschriftgröße von 10 Pixel zu setzen. Der Körperabschnitt, alles, was wir hier tun werden, ist, eine Hintergrundfarbe zu setzen, und dann werden wir unser ansprechendes Layout erstellen. Wir werden die Flexbox benutzen. Dann setzen wir auf den kleineren Bildschirmen unsere Seitenleiste und unseren Hauptbereich auf den Anzeigetyp der Spalte. Dann ändern wir dies auf den größeren Bildschirmen, um die Art der Zeile zu sein. Zuallererst die Hintergrundfarbe, die ich als RGB-Wert verwenden werde. Die rote Farbe wird 48 und 47 für den grünen Wert sein, und die gleiche für das Blau. Der Anzeigetyp wird die Flexbox sein und wir können die Flex-Richtung ändern, um Spalte zu sein. Wir sehen keinen großen Unterschied bei der Minuten-Birne. Wir gehen, um diese beiden Abschnitte zu trennen, indem den Hauptbereich dreimal so breit wie die Seitenleiste machen. Lasst uns das etwas breiter machen. Kann wieder die Vorteile der Flexbox nutzen und den Hauptbereich so einstellen, dass er einen Flex-Wert von drei hat. Damit dies funktioniert, müssen wir auch den Seitenabschnitt einstellen. Dies wird einen Flex-Wert von eins haben. Beim Neuladen sehen wir keine Auswirkungen auf die Seite. Dies tritt auf, weil wir die Flexrichtung auf Spalte gesetzt haben. Damit dies auf den größeren Bildschirmen besser funktioniert, müssen wir eine Medienabfrage hinzufügen, um die Flex-Richtung so zu ändern, dass sie wieder in Zeile ist. Lassen Sie uns @media hinzufügen. Wo wir unsere Mindestbreite so einstellen können, dass sie ein Wert unserer Wahl ist. Ich werde für einen Wert gehen, der 1.000 Pixel sein wird. Das einzige, was wir hier im Inneren tun müssen, ist, unseren Körperabschnitt zu zielen und dann die Flex-Richtung zu ändern, um Zeile oder zum Browser zu sein. Wenn Sie dies nun ein wenig größer machen, sehen wir den Flex-Wert von drei. Für unseren Hauptbereich hat nur die Sidebar einen Flex-Wert von eins, was bedeutet, dass es ein Drittel der Größe ist. dies auf 1.000 Pixel oder darunter reduzieren, werden unsere Flex-Richtungen wieder zur Spalte für unseren kleineren Bildschirm zurückkehren. Für die Seitenleiste auf der größeren Ansicht werden wir auch nur einen kleinen Rand auf der linken Seite hinzufügen , um uns etwas Platz von unserem Bild zu geben. Die Seiten Abschnitt, können wir den Rand auf der linken Seite von 0.5rems setzen. Dann werden wir mit diesen Knöpfen arbeiten. Die Buttons sind für alle unsere Effekte und auch die klaren und die Download-Buttons. Der Hintergrund wird ein RGB-Wert von 21, 20 und 20 sein. Lassen Sie uns diese etwas größer mit etwas Polsterung machen. So 1.6rems oben, Null auf der rechten Seite wird dies konsistent mit der Oberseite und bei 1.6rems auf der Unterseite halten und dann 2rems auf der linken Seite hinzufügen, was uns einige Abstände von der linken Seite von unten geben wird. Die Schriftgröße von 1.6rems, das ist 16 Pixel. Der Cursor wird als Zeiger festgelegt werden, wenn der Benutzer den Mauszeiger über eine dieser Schaltflächen bewegt. Die Farbe, damit wir den Text sehen können. Dies wird ein rgb-Wert sein. Das Rot ist 212, 210 für das Grün und der blaue Wert 210. Angesichts unseres Textes eine hellere Farben, so hebt es sich mehr. Wir können diesen Standardrahmen auch entfernen, indem Sie diesen auf den Wert none setzen. Dann können wir unsere eigene Grenze ganz unten verwenden , um uns eine weiße Linie zwischen jedem dieser Tasten zu geben. Diese weiße Linie wird ein Pixel breit und eine einfarbige Farbe sein. Als nächstes fügen wir unseren Schaltflächen einen Hover-Effekt hinzu. Wir tun dies mit dem Hover-Zustand. Alles, was wir hier tun müssen, ist, seiner Hintergrundfarbe eine leichte Veränderung zu geben. Der Wert, für den ich gehen werde, ist ein RGB-Wert von 50, 47 und 47. Versuchen wir es mal. Das ist alles gut. Jetzt werden wir all diese Knöpfe auf ihre eigenen Linien setzen. Dies ist relativ einfach alles, was wir tun müssen, ist unsere Effektklasse anzusprechen, die der div Wrapper für alle diese Schaltflächen unten in unserem HTML ist. Lassen Sie uns unsere Effekte anvisieren. Wir müssen den Anzeigetyp so einstellen, dass er flex ist. Dann, um diese vertikal zu machen, können wir die Flex-Richtung auf Spalte zu sein. Bis zu unseren Steuerelementen, die die Schaltfläche „Löschen“ und „Herunterladen“ sind. Wir werden sicherstellen, dass jede dieser Tasten die Hälfte der Breite des verfügbaren Platzes einnimmt . Auch hier werden wir den Anzeigetyp von Flex nutzen, und dann können wir jede unserer Schaltflächen anvisieren, die innerhalb dieses Steuerungsabschnitts verschachtelt sind. Wenn wir den Flex auf einen Wert von eins setzen, wird dies sicherstellen, dass jede unserer Schaltflächen innerhalb des Abschnitts geöffnet wird gleiche Mengen an Platz. Wir haben immer noch ein Brett ganz unten, so dass wir dies mit Border-bottom keine entfernen können. Wenn wir nach oben scrollen, das nächste, was wir tun werden, ist, alle Texte zu verschieben, diese Schaltflächen auf der linken Seite zu sein. Wir können dies tun, indem Sie den Text ausrichten, um links zu bleiben. Dann können wir für unsere beiden Knöpfe auf der Unterseite dies wiederherstellen, indem wir dies auf eine Textausrichtung einstellen und zentriert sein. Wir können auch die Auffüllwerte für diese Schaltfläche Löschen und Herunterladen entfernen. Die Polsterung. Lassen Sie uns für 1.6rems oben und unten und Null auf der linken und rechten Seite gehen, die dann unseren Text in die Mitte unserer Schaltflächen ziehen. Zurück nach oben haben wir diesen Abschnitt, der ein Label und auch eine Eingabe hat. Beginnen wir mit unserem Label. Legen Sie die Schriftgröße ein wenig größer. Also 1.8rems. Wenn wir auch den Browser strecken, um eine breitere Größe zu sein. Wenn diese beiden Elemente nebeneinander sind. Wir brauchen auch eine Polsterung auf der rechten Seite dieses Etiketts. Ich möchte 1.6rems hinzufügen. Sowohl dieses Label als auch die Eingabe war in einem div namens input wrapper umgeben. Jetzt werden wir dies verwenden und etwas Polsterung und auch eine Hintergrundfarbe hinzufügen. Das war die Klasse, also verwenden wir den Punkt. Der Hintergrund möchte diesem eine einfache Farbe von Grau und auch einen Füllwert von 1.6rems geben. Um diesen CSS-Abschnitt abzuschließen, wählen wir unseren Canvas-Abschnitt aus, sich auf der linken Seite im Hauptbereich befindet, und setzen Sie dann diesen Wert auf 100 Prozent des verfügbaren Speicherplatzes. Das ist alles, was wir tun werden. Wir können weitermachen und einige weitere Änderungen vornehmen. Was jemand hält den Stil dieses Projekts ziemlich einfach, und dann im nächsten Video, gehe ich mit dem Zeichnen auf die Leinwand. 5. Zeichnen für die Leinwand: Damit dieses Projekt jetzt zum Leben erweckt wird, müssen wir ein Skript hinzufügen und auch entdecken, wie wir auf die Leinwand zeichnen können. Am Ende unseres Index oder HTML, direkt über der Klausel und dem Körper, lassen Sie uns unser Skript mit der Quelle von script.js hinzufügen. Über die Sidebar, können wir jetzt diese script.js erstellen. Jetzt haben wir eine Canvas-Elemente in unserem HTML, und dies hat auch die ID von Canvas. Aber wie gehen wir eigentlich auf diese Leinwand? Nun, das erste, was wir tun wollen, ist eine Konstante namens Canvas zu erstellen. Hier drinnen werden wir diese Leinwand nach der ID auswählen, also getElementById und die ID war Canvas. Dies gibt uns jetzt unseren Verweis auf unser HTML-Element. Wir müssen dann auf das zugreifen, was der Rendering-Kontext genannt wird. Dies ermöglicht es uns, auf eine Reihe von Zeichnungsfunktionen zuzugreifen, so dass wir manipulieren können, was auf der Leinwand ist. Wir können dies tun, indem wir auf unsere Canvas-Elemente zugreifen, die wir oben wiederhergestellt haben. Wir können den Kontext zugreifen, indem Sie eine Methode namens GetContext verwenden. Wir werden nur auf die 2D-Features zugreifen, also übergeben wir in 2D. Dann werden wir das in einer Konstante namens ctx speichern. Die ctx-Referenzen werden jedes Mal verwendet, wenn wir auf die Leinwand zeichnen möchten. Zum Beispiel hat dieser Kontext eine FillText-Methode, um einen Text auf unsere Leinwand zu zeichnen. Lassen Sie uns auf unseren Kontext zugreifen, und dann können wir eine dieser Zeichenfunktionen verwenden, die wir erwähnt haben, die FillText genannt wird. Drinnen hier als String werden wir einen Text übergeben, den wir auf der Leinwand anzeigen möchten. Füge hier alles hinzu. Wir können dann zwei weitere Werte hinzufügen, die die Breite und auch die Höhe ist. Lassen Sie uns für 100 Pixel und 50 Pixel gehen. Dann schauen wir uns das im Browser an. Nimm das runter. Die dunklere Textfarbe hebt sich nicht zu sehr hervor, aber das ist jetzt unser Text auf der Leinwand. Wir können auch Formen wie ein Rechteck erstellen, und wir können auch entweder den Strich verwenden, der den Umriss des Rechtecks oder die Form ist, oder wir können eine Füllung verwenden, die eine gefüllte Form erstellen wird. Werfen wir einen Blick darauf, wie wir ein Rechteck in der Leinwand erstellen können. Wir greifen wieder auf den Kontext zu. Wir können dann ein Rechteck mit FillRect füllen. Wir werden dann alle verschiedenen Werte übergeben. Die ersten beiden einfachen X- und Y-Koordinaten der Leinwand, wo wir dieses Rechteck starten möchten. Wenn wir einen x-Wert Null eingegeben haben und der y-Wert Null ist, ersetzt dies unser Rechteck in der oberen linken Ecke der Leinwand. Ein dritter und vierter Wert wird die Größe des Rechtecks sein. Wenn dies 50 mal 100 sein soll, ist das jetzt 50 Pixel breit und 100 hoch. Wenn wir diese einfarbige Farbe nicht wollten und wir nur einen Umriss wollten, könnten wir dies in den StrokeRect ändern. Dieser Strich und diese Füllung können auch angewendet werden, wenn wir verschiedene Formen erstellen. Anstatt eine feste Größe genau so anzugeben, können wir auch auf unser Canvas-Objekt zugreifen und dies als Variable übergeben. Wir können die Leinwandbreite und auch die Leinwand, die Höhe einstellen. Dies wird uns nun ein Rechteck geben, das die Höhe und die Breite der Leinwand ist. Wir können auch verschiedene farbige Objekte verwenden. Die Art und Weise, wie wir die Farbe ändern können, ist, indem Sie auf den Kontext zugreifen und dann den FillStyle verwenden. Ich möchte festlegen, dass diese nächsten Rechtecke gleich dem x-Wert von 42e9f5 sind. Lassen Sie uns das jetzt über unser Rechteck hinauf bewegen. Wir können dies zu einem gefüllten Rechteck ändern und dies auch ein wenig kleiner machen. Lassen Sie uns das auf 50 mal 50 ändern, um uns ein Quadrat zu geben. Ein weiteres Beispiel dafür, was wir mit der Leinwand tun können, ist, einige Linien zu zeichnen , um einige komplexere Formen zu erstellen. Wenn wir beispielsweise so etwas wie ein Dreieck erstellen wollten, können wir dann eine Reihe von Linien erstellen, um die Form zu erstellen. Wir werden unsere Form mit CTX.BeginPath beginnen. BeginPath startet oder setzt alle vorhandenen Pfade zurück, die wir oben erstellt haben. Danach werden wir genau erklären, wohin auf der Leinwand, wir wollen unseren Beitritt beginnen. Zum Beispiel, wenn wir dies in der Mitte der Leinwand beginnen wollten, werden wir CTX.MoveTo tun. MoveTo wird unsere Referenzpunkte an eine beliebige Stelle auf der Leinwand verschieben , ohne tatsächlich Linien zu zeichnen. Die Art und Weise, wie wir dies in der Mitte platzieren können, besteht darin, die Canvas.width zu setzen und dann durch 2 zu teilen, um dies in der Mitte zu platzieren. Dann können wir dasselbe für die Leinwand tun.height, indem wir dies durch 2 teilen. Moment sollten wir in einer Position sein, in der wir bereit sind, gerade Linien aus der Mitte unserer Leinwand zu zeichnen. Wir greifen auf unseren Kontext und dann auf LineTo zu. Wenn Sie eine Linie in die obere rechte Ecke zeichnen möchten, sind die Koordinaten, die wir im Moment benötigen, 300 und Null. Also 300 für den x-Wert und Null für den y-Wert. Warum brauchen wir diese beiden genauen Werte? Nun, das liegt daran, dass die Leinwand standardmäßig 300 Pixel breit und 150 Pixel hoch ist. Wenn diese Position oben links Null, Null, der erste Wert von 300 ist , werden wir diese rechts am Ende platzieren. Wir verwenden dann den Nullwert, um ganz oben auf der Leinwand zu bleiben. Wenn wir irgendwelche anderen Werte innerhalb von hier hinzugefügt haben, wird dies dann weiter nach unten schieben. Wir haben tatsächlich unsere erste Zeile mit der Serie auf der Leinwand erstellt. Wir müssen auch ctx.stroke verwenden. Dann müssen wir von hier aus nur eine Reihe von Linien erstellen. Die nächste, wenn wir dies von oben rechts nach unten rechts machen wollen, beginnen wir damit, den x-Wert als 300 zu behalten, was ganz am Ende liegt. Wie wir beschrieben haben, wird die Höhe der Leinwand standardmäßig 150 sein, aber dies hinterlässt uns eine Linie von oben rechts nach unten rechts. Wenn wir das wieder ins Zentrum bringen wollten, haben wir dann zwei Möglichkeiten. Wir könnten voran gehen und eine neue Zeile erstellen, genau wie wir es mit diesen beiden Codezeilen getan haben, oder stattdessen können wir zurück zum Anfang gehen, was die Mitte der Leinwand ist, indem wir Ctx.closePath verwenden. Ich werde jetzt ein Dreieck haben. Wenn wir dies mit einer einfarbigen Farbe füllen wollten, könnten wir den Strich durch Füllung ersetzen. Dies ist jetzt eine grundlegende Einführung, um auf der Leinwand beizutreten. Das ist alles großartig, aber wir brauchen nichts davon für unser Projekt. Stattdessen müssen wir ein Bild auf diese Leinwand zeichnen. Stattdessen werden wir diesen Abschnitt zu entfernen, und wir können ein neues Bildelemente erstellen. Wir können ein neues Bildelemente mit neuem Bild erstellen. Dieser neue Bildkonstruktor wird ein neues Bildelemente erstellen , genau wie wir es getan haben, wenn wir documents.createElements verwenden. Werfen Sie dies in eine Konstante namens img. Als nächstes müssen wir eine Bildquelle festlegen. Wir müssen unser Bild greifen und das Quellattribut so einstellen , dass es unserem Bild entspricht, das bridge.jpg ist. Denken Sie daran, diese Bildquelle zu ändern, wenn Sie ein anderes Bild verwendet haben. Wir haben jetzt ein neues Bildelemente und wir haben die Quelle gesetzt. Jetzt müssen wir das auf der Leinwand positionieren. Aber kurz bevor wir dies tun, müssen wir tatsächlich sicherstellen, dass dieses Bild erstellt wurde , bevor wir versuchten, es auf die Leinwand zu zeichnen. Die Art und Weise, wie wir damit tun können, besteht darin, onload zu verwenden, das eine Funktion ausführen wird, sobald unser Bild erstellt wurde. Innerhalb dieser Funktion werden wir unser neues Bild auf die Leinwand zeichnen. Wie immer wählen wir unseren Kontext aus, und dann haben wir Zugriff auf DrawImage. Das erste, was wir hinzufügen müssen, ist das Bild, das Sie zeichnen möchten, und das ist unsere Bildvariable. Dann legen wir die Position auf der Leinwand fest, an der dieses Bild angezeigt werden soll. Wenn wir dies auf Null und Null setzen, wird dies von der oberen linken Ecke angezeigt. Wir sehen jetzt ein Bild auf dem Bildschirm, aber das Bild ist viel zu groß für die Leinwand. Eine andere Sache, die wir tun können, ist, zwei weitere Werte hinzuzufügen, und das ist, um die Bildbreite und -höhe festzulegen. Wenn wir dies auf 300 mit der Höhe und auf 150 für die Breite setzen, wird dies nun sicherstellen, dass unser Bild jetzt die gleiche Größe wie die Leinwand hat. Obwohl wir dieses Bild jetzt auf dem Bildschirm sehen, sieht es nicht zu hochwertig aus. Dies liegt daran, dass das Bild jetzt so gestreckt wurde, dass es die gleiche Größe wie eine Leinwand hat. Wir können es jedoch umschalten und sicherstellen, dass die Leinwand dann auf die gleiche Größe wie das Bild erweitert wird. Lassen Sie uns dies direkt oben tun, wo wir unser Bild zeichnen. Wir können die Breite unserer Leinwand mit Leinwand.width so einstellen , dass sie gleich der Breite unseres Bildes ist. Gleich unten, genau das gleiche für unsere Höhe, setzen wir die Leinwandhöhe auf unsere Bildhöhe. Wir können die letzten beiden Werte verschieben, wo wir unsere Bildgröße innerhalb der DrawImage einstellen. Dies wird uns nun ein klares Bild geben, da die Leinwand nun auf die gleiche Größe wie das Bild gestreckt wird. Dies ist eine grundlegende Übersicht über einige der Dinge, die wir mit der Leinwand umgehen können. Aber wir werden dies nur verwenden, um Bilder hinzuzufügen und die Pixel zu manipulieren. Als nächstes möchten wir unseren Datei-Uploader nutzen , den wir oben in dieser Seitenleiste hinzugefügt haben. Dies wird es dem Benutzer ermöglichen, ein Bild von seinem Computer auszuwählen , anstatt diesen hartcodierten Wert nur hier zu verwenden. 6. Hochladen von Bildern: Anzeigen eines Bildes auf dem Bildschirm oder auf der Leinwand ist jetzt ein großer Schritt in Richtung der Arbeit unserer Anwendung. Aber das nächste, was wir tun möchten, ist, dass der Benutzer auf den Datei-Uploader klicken, ein Bild seiner Wahl auswählen und dann auf der Leinwand anzeigen kann. Im Moment sind wir nur schwer, eine Bildquelle mit dem Bild zu codieren , das sich innerhalb unseres Projektordners befindet. Das ist, was wir jetzt in diesem Video machen werden. Wir werden damit beginnen, ein neues FileReader-Objekt zu erstellen, und dann können wir diese innerhalb einer Konstante namens Reader speichern. Dieser FileReader wird es uns ermöglichen, Inhalte von Dateien zu lesen, oder in unserem Fall das Bild, das auf dem Computer des Benutzers gespeichert ist. Dies wird uns erlauben, den Datei-Uploader zu verwenden, und dies ist die Eingabe, die wir im HTML hinzugefügt haben. Wir können dann ein Bild auswählen und dann als unsere Bildquelle festlegen. Der erste Schritt dafür ist, mit unserem Index zu gehen und hier drinnen, wenn wir nach unserem Uploader suchen, hat dies die ID des Uploaders. Wir werden getElementById verwenden, um diese Eingabe auszuwählen, und dann eine Funktion auslösen, wenn dies geändert wird. Zurück zu unseren Skripten unten, können wir einen Verweis auf diese Eingabe namens ImageLoader erstellen, die ID mit getElementById erfassen, und die ID war Uploader. Wir können dann unsere Konstante von ImageLoader auswählen und einen EventListener hinzufügen. Das Ereignis, auf das wir abhören möchten, ist das Änderungsereignis, und dies tritt auf, wenn eine neue Datei hochgeladen wurde. Wenn dies geschieht, werden wir eine Funktion namens UploaImage erstellen. Dann lassen Sie uns diese Funktion direkt oben erstellen, die UploaImage war. Dieses UploadImage wird auch über die Ereignisinformationen hinausgehen , da wir eine Eingabe verwenden. Um mit dieser Funktion zu beginnen, werden wir ein Konsolenprotokoll erstellen und einfach den Wert unseres Dateilesers ausgeben. Lassen Sie uns unseren Leser ausgeben, alle an den Browser, klicken Sie mit der rechten Maustaste und inspizieren, und wir können sehen, welche Daten in der Konsole übergeben werden. Wählen Sie unsere Datei, wählen Sie ein beliebiges Bild, und dann können wir hier die Ausgabe unseres Dateilesers sehen. Derzeit werden alle unsere Werte, einschließlich des Ergebnisses, auf den Wert null gesetzt. Dies liegt daran, obwohl wir ein Dateileser-Objekt-Setup haben, haben wir es noch nicht unsere Bilddaten übergeben. Die Dateidaten stammen von unserem Image-Uploader , der innerhalb dieser e-Variable gespeichert ist. Werfen wir nun einen Blick auf den Wert von e, laden Sie den Browser neu, und wir können ein neues Bild auswählen, öffnen Sie dies, dies sind alle Informationen die an diese Funktion über unser Änderungsereignis übergeben werden. Wenn wir dann das Ziel öffnen, die unsere Eingabe ist, klicken Sie auf den Pfeil, und dann nach unten scrollen, haben wir diesen Wert namens Dateien. Dies ist eine Liste aller Dateien, die aus unserem Datei-Uploader hochgeladen wurden. Natürlich haben wir nur erlaubt, eine einzelne Datei hochzuladen. Das wird also nur den Wert Null haben. Dies ist unser Name, der bridge.jpg ist. Wir können diese Bilddaten nun an unseren Dateileser übergeben. Denken Sie daran, dass wir auf das Ereignis zugreifen, wir greifen dann auf die Ziele zu, wir greifen dann auf die Dateien und die erste Datei von Null zu. Zurück zu unserer Funktion, können wir jetzt unseren Leser Ziel, und dann können wir diese Datei URL mit ReadAsDataUrl setzen. Innerhalb seiner Methode übergeben wir dann den Speicherort unserer Datei, die e.targets.files war, und die erste Datei, die der Index von Null ist. Lassen Sie uns nun wieder ein neues Konsolenprotokoll mit dem Wert des Lesers machen und sehen, was diesmal passiert. Denken Sie daran, das letzte Mal, als wir das gemacht haben, haben wir den Wert von null bekommen. Öffnen Sie also die Konsole, wählen Sie die neue Datei aus. Wir haben unser FileReader-Objekt, und jetzt innerhalb dieses Ergebnisses unten, haben wir jetzt einige Dateidaten anstatt den Wert von null. Dieser FileReader hat jetzt alle Daten, die wir brauchen. Nun, alles, was wir tun müssen, ist auf unseren Leser zuzugreifen, und dann, wie wir es oben mit unserem Bild getan haben, werden wir auch eine Funktion auslösen, sobald das Laden fertig ist. Dies lässt uns jetzt in der gleichen Position, die wir gerade oben hatten, wo wir unsere Bildquelle haben, und dann müssen wir diese auf die Leinwand laden. Um dies zu tun, können wir den Abschnitt nur hier verschieben, dies innerhalb unserer onload-Funktion einfügen, und jetzt anstelle seines hartcodierten Werts von bridge.jpg werden wir jetzt die Bildquelle so einstellen, dass sie dem Leser entspricht und auch Zugriff auf den Ergebniswert, den wir gerade in der Konsole gesehen haben. Jetzt bleibt alles, was noch zu tun ist, dies zu speichern und dies im Browser zu testen. Also wählen wir eine Datei, greifen ein beliebiges Bild, und diese Datei wird jetzt in der Leinwand angezeigt. Hoffentlich funktioniert das jetzt auch für Sie. Es ist ziemlich viel los hier, also lasst uns eine kurze Zusammenfassung machen. Wenn wir zu unserem Drehbuch zurückkehren. Zuerst haben wir unsere Dateieingabe ergriffen und diese innerhalb einer Konstante namens ImageLoader gespeichert. Fügen Sie alle diese Art und Weise hinzu und warten Sie auf alle Änderungen , die aufgetreten sind, nachdem eine neue Datei hochgeladen wurde. Dies wird dann unsere UploadImage-Funktion auslösen, die wir gerade hier eingestellt haben. Wir haben eine Reader-Variable erstellt, die einem neuen FileReader-Objekt entspricht. Dieser Dateileser ermöglicht es uns, den Inhalt jeder hochgeladenen Datei zu lesen, die in unserem Fall Bilder sind. Sobald diese UploadImage-Funktion ausgeführt wurde, erhält sie dann die Ereignisinformationen übergeben, die das Bild enthält, das der Benutzer hochgeladen hat. Diese Dateiinformationen werden dann an unseren FileReader übergeben, und wir tun dies mit einer Methode namens ReadAsDataUrl. Schließlich, wenn all dies fertig und vollständig geladen ist, werden wir dann die Bildquelle setzen und dann auf der Leinwand mit unseren Bildern anzeigen . Jetzt hochgeladen. Als nächstes werden wir lernen, wie Sie auf alle Pixel zugreifen, aus denen diese Bilder bestehen. Sobald wir dann verstehen, wie alle Pixel ein Bild bilden, können wir dann mit ihnen herumspielen, um unsere Effekte zu erzeugen. 7. Pixeldaten verstehen: Um zu verstehen, wie wir unsere Bilder manipulieren und auch Effekte hinzufügen können, müssen wir zuerst verstehen, wie Pixel unsere Bilder bilden. Um die Pixeldaten aus unserer Leinwand zu erhalten, haben wir eine Methode namens GetImageData zur Verfügung. Werfen wir einen Blick darauf, wie wir das innerhalb unseres Skripts verwenden können. Installieren Sie dies innerhalb einer Konstante namens ImageData. Ich werde dies gleich ctx setzen und dann die Methode aufrufen, die wir gerade erwähnt haben, die GetImageData war. GetImageData wird es uns ermöglichen, alle Pixel, die Sie auf der Leinwand gespeichert haben, zu erfassen. Da wir alle Pixelwerte von der vollen Größe der Leinwand erfassen möchten, sind die ersten beiden Werte, die wir hinzufügen werden, die Anfangsposition der oberen linken Seite, die 0, 0 ist. Die nächsten beiden Werte, wollen wir die volle Breite der Leinwand und auch die volle Höhe zu greifen . Wir können dies mit canvas.width tun und auch die Canvas.height auswählen. Dies wird alle Bilddaten von oben links über die Seite nach rechts unten greifen . Auch als Randnotizkönnen wir einen kleineren Teil der Leinwand auswählen, können wir einen kleineren Teil der Leinwand auswählen wenn wir nur die Bilddaten für einen bestimmten Teil wollten. Wir wollen jedoch die volle Größe der Leinwand, da das Bild die volle Größe der Leinwand haben wird. Lassen Sie uns ein Konsolenprotokoll machen und sehen, was im Browser passiert. Protokollieren Sie unsere ImageData, klicken Sie mit der rechten Maustaste und überprüfen Sie. Schauen Sie auf der Registerkarte „Konsole“. Wir haben jetzt diese Bilddaten. Denken Sie daran, dass wir schon früh erwähnt haben, dass die Standardbreite und -höhe der Leinwand 150 mal 300 beträgt. Wir haben auch diese Daten und wenn wir auf den Dropdown-Pfeil klicken, sehen wir, dass wir eine 180.000 verschiedene Werte haben. Alle unsere Daten werden in einer Array-ähnlichen Struktur gespeichert. Haben 180.000 Werte, die alle unsere Canvas-Daten ausmachen. Wenn wir auf die Dropdown-Liste klicken, um einen dieser Abschnitte zu erweitern, sehen wir alle Werte auf Null gesetzt. Dies liegt daran, dass wir momentan nichts auf der Leinwand gespeichert haben. Nun, wenn wir dies genauer mit einem Bild sehen wollen, können wir diese beiden Codezeilen greifen und diese in unserer eigenen Ladefunktion platzieren. Dies bedeutet, dass dieser Abschnitt erst dann ausgeführt wird, wenn ein Bild hochgeladen wurde. Wählen Sie die Datei, wählen Sie das Bild aus. Unsere Bilddaten werden nun wieder zurückgegeben. Dieses Mal sehen wir jedoch eine andere Höhe und eine andere Breite, da wir die gesamte Leinwandgröße so einstellen, dass sie unserem Bild entspricht. Wir sehen auch, jetzt haben wir eine größere Leinwand. Wir haben jetzt 4,3 Millionen Daten. Dieser nächste Teil ist wirklich wichtig zu verstehen. Zunächst einmal, wenn wir unsere Höhe und unsere Breite greifen, können wir diese beiden Werte zusammen multiplizieren, also 853, und dann multiplizieren Sie dies mit 1280, was uns einen Wert von 1,09 Millionen ergibt. Dies wäre vielleicht die Anzahl der Pixel oder die Anzahl der Daten , die Sie erwarten würden, wenn Sie die Breite und die Höhe multiplizieren. Allerdings haben wir einen Wert, der viermal höher ist. Wenn wir 1091840 mit dem Wert von vier multiplizieren, sehen wir dann 4,3 Millionen, genau wie in unseren Daten. Dies führt nun zur Frage, warum bekommen wir genau das Vierfache der Werte eine beliebige Anzahl von Pixeln zurück? Nun, das liegt daran, dass jedes Pixel auf unserer Leinwand aus vier Kanälen besteht. Wir haben einen roten, grünen und blauen und auch einen Alpha-Wert. Die Rot-, Grün- und Blauwerte bilden die Farbe jedes Pixels. Das allererste Pixel oben links wäre also unser erstes Stück Daten. Wenn wir hier hineingehen, ist unser allererstes Pixel oben links diese ersten vier Werte gerade hier. Dieses bestimmte Pixel besteht aus einem roten Wert von 49, grünen Wert von 39 und einem blauen Wert von 92. Der vierte Wert von 255 ist der Alpha-Wert, und dies ist die Deckkraft. Wenn dies ein Wert von Null war, ist dies vollständig transparent. Aber 255 ist der höchste Wert, was bedeutet, dass auf diesem bestimmten Pixel keine Transparenz festgelegt ist. Das gleiche, wenn wir zum nächsten Stapel von vier Pixeln gehen, sehen Sie die roten, grünen und blauen Werte und auch den endgültigen Alpha-Wert. Unser erstes Pixel und unser zweites Pixel sind die gleichen Farben. Wenn wir zur dritten Charge gehen, also 8, 9, 10, 11, sehen wir, dass, weil dies zu einer anderen Farbe gemischt wird, der rote Wert von 49 auf 50 gestiegen ist, der grüne Wert von 39 auf 40 gewechselt hat, und auch der blaue Wert ist ebenfalls gestiegen. Nur um zusammenzufassen, haben wir die Bilddaten, die von der Leinwand zurückgegeben wurden. Wir haben die Höhe und die Breite der Leinwand und wenn wir diese beiden Werte multiplizieren, gibt dies uns die Gesamtzahl der Pixel auf der Leinwand. Jedes einzelne Pixel hat die vier Werte Rot, Grün, Blau und Alpha. Deshalb sind die Daten, die wir an uns zurückgeben , genau das Vierfache der Pixelmenge. Jetzt mit diesem Wissen, wie Pixel mit den vier Kanälen gebildet werden, werden wir jetzt das, was wir im nächsten Video gelernt haben, verwenden, indem wir diese Pixel durchschleifen und sie zu unterschiedlichen Werten ändern. 8. Schleifenbildung durch Bilddaten: Jetzt wissen wir, dass alles, was sich auf der Leinwand oder alle unsere Pixel befindet, jetzt in dieser Konstante namens ImageData gespeichert sind. Wir können damit nun alle unsere Daten durchlaufen, die innerhalb gespeichert sind, und dann können wir mit den Pixelwerten herumspielen. Um dies zu tun, werden wir eine Funktion erstellen, in der wir diese Pixeldaten erfassen und ein wenig mit jedem der Werte herumspielen können. Also funktioniere ich, und ich, wie ich diese Änderung nennen soll. Wir können auch unser Konsolenprotokoll von oben entfernen. Wir können diese Codezeile einfach hier greifen. Setzen Sie das aus und fügen Sie es in unsere Änderungsfunktion ein. Alle unsere Pixeldaten innerhalb dieser Variablen werden in dieser Dateneigenschaft gespeichert. So können wir darauf zugreifen und neue Konstante namens Daten erstellen und diese gleich ImageData.Data setzen, und dies gibt uns Zugriff auf alle Pixelwerte innerhalb dieser Dateneigenschaft. Wir wissen also, dass es Hunderte, Tausende oder sogar Millionen von Daten in dieser Eigenschaft gibt. Also das Beste, was wir tun können, ist, jede von ihnen in Chargen von vier zu durchlaufen. Wenn wir dies in Vierer-Chargen durchlaufen, wissen wir, dass der erste Wert in jeder Schleife immer der rote Wert sein wird. Der zweite Wert wird immer der grüne sein, und der dritte Wert wird immer der blaue Wert sein. Um dies innerhalb unserer Änderungsfunktion zu tun, werden wir eine for-Schleife erstellen. Sobald die Schleife ausgeführt wird, erstellen wir eine neue Variable namens i und setzen diese zunächst auf 0. Wir möchten, dass diese for-Schleife so lange läuft, wie Werte in unseren Daten gespeichert sind. Also werden wir das so lange halten, wie ich weniger als data.length ist. Daten sind also alle unsere Bilddaten und Länge ist die Anzahl der Elemente, so dass unsere Schleife so lange läuft, wie Pixeldaten durchlaufen werden müssen. Die dritte Aussage, die wir sagen, i plus ist gleich 4. Also in der allerersten Schleife werden wir die Variable von i auf 0 setzen, und dann für jede Schleife, nachdem wir diesen Wert um vier erhöhen. Wir tun dies, weil, wie wir bereits wissen, jedes Pixel vier Werte hat. Wenn Sie dies auf jeder Schleife um vier erhöhen, wird dies der Anfang jedes Satzes von Pixeldaten sein. In der allerersten Schleife werden wir die ersten vier Pixelwerte erfassen. Das werden diese nur hier sein. Wir können auf diese mit Daten zugreifen, und genau wie ein Array können wir auf das allererste zugreifen, was der rote Wert ist, wir haben Daten i gemacht. Denken Sie daran, ich gleich 0 ist, so dass dies genau das gleiche wie Daten 0 sein wird. Wenn wir dies noch zwei Mal duplizieren, können wir den zweiten Wert mit der Indexnummer eins erhalten. Dies ist der Wert von grün und der blaue Wert mit der Anzahl von zwei. Wenn wir wollten, könnten wir auch den Alpha oder den Transparenzwert erfassen, aber wir brauchen diesen für dieses Beispiel nicht. Dies ist die erste Charge oder die ersten vier Werte. Sobald diese Schleife ausgeführt wurde, wird der Wert von i um vier erhöht, und dann wird dies zum nächsten Satz von vier Werten übergehen, so dass i gleich 4, 5, 6 und 7 ist. Deshalb, anstatt diese fest codierten Werte zu haben, können wir dies auf i setzen, das ist der erste von jedem Satz von vier, und i plus 1, und dann i plus 2. Diese erste Zeile hier wird immer gleich einem roten Wert sein. Dies wird immer gleich unseren grünen Werten sein, und das wird immer gleich unseren blauen Werten sein. Wenn wir also mit diesen Farben herumspielen wollen, geht ein RGB-Wert von Null bis zu 255. So könnten wir zum Beispiel den roten Wert auf 255 setzen. Um diese Änderungen zu sehen, müssen wir diese Pixel jetzt wieder auf die Leinwand anwenden. Um dies zu tun, können wir eine Methode namens PutimageData verwenden. Also, kurz nach unserer for-Schleife, können wir wieder auf unseren Kontext zugreifen, und dann auf die Methode namens PutimageData. Die Daten, die wir auf die Leinwand zurücksetzen möchten, sind diese ImageData. Ich werde dies ganz oben links auf die Leinwand mit der Position 0, 0 anwenden. Dann schließlich, lassen Sie diese Änderungsfunktion aufrufen, müssen wir einen Click-Handler zu unserer ersten Schaltfläche hinzufügen. Innerhalb unseres Index beginnen wir mit der Graustufenschaltfläche, die die erste Schaltfläche in diesem Effektbereich ist. Lassen Sie uns diese Word-Dokumente greifen und dieses Mal werden wir QuerySelectorAll verwenden. Dies wird alle Elemente auf unserer Seite zu greifen, die den Typ der Schaltfläche hat. Da wir mehrere Schaltflächen haben, müssen wir dann unsere erste Schaltfläche mit der Indexposition Null auswählen. Mit AddEventListener können wir dann auf alle Click-Ereignisse hören, die dann unsere Änderungsfunktion ausführen werden. Lassen Sie uns das im Browser ausprobieren. Lassen Sie unseren Live-Server neu starten, wählen Sie ein neues Bild. Wenn wir dann auf unsere erste Schaltfläche klicken, die Graustufen ist, setzen wir dann alle roten Werte innerhalb unserer Bilddaten auf einen starken Rotwert von 255. Aktualisieren wir jetzt unsere For-Schleife, und wir setzen unsere roten Farben wieder ein, um genau so zu sein, wie sie im Bild sind. Gehen Sie runter zu unserem grünen Abschnitt, wo wir stattdessen das Grün auf 255 setzen. Laden Sie dieses Bild hoch, klicken Sie auf unsere Funktion und wir sehen jetzt, wie die grüne Farbe wirkt. Wir könnten auch das gleiche mit dem dritten oder dem blauen Wert tun. Das ist alles, was wir tun müssen, um Effekte auf unsere Bilder anzuwenden. Jetzt ist es nur der Fall, die Farbwerte unserer Pixel anzupassen , abhängig davon, welche Effekte wir anwenden möchten, und das ist, was wir als nächstes tun werden, wenn wir einen Graustufeneffekt anwenden. 9. Die Funktionen Graustufe, Sepia und Invertieren: Mit dem Wissen, das wir jetzt über gerade in diesen Pixelwerten haben, können wir nun einige Effekte hinzufügen und sie mit unseren Schaltflächen verknüpfen. Das erste, was wir tun werden, ist mit unserem Graustufen-Button zu beginnen. So können wir diese Beispielfunktion in Graustufen ändern. Damit müssen wir auch unseren Klick-Listener ändern, von der Änderung muss dies auch unser Funktionsname der Graustufen sein. Für diesen Graustufeneffekt müssen wir eine Farbe von Grau erstellen und diese dann jedem unserer Rot-, Grün- und Blauwerte hinzufügen . Innerhalb unserer Schleife werden wir eine Konstante für unseren Grauwert erstellen. Dann müssen wir unseren grauen Wert schaffen. Wir werden dies tun, indem wir zuerst unsere rote Farbe auswählen, die Daten i sind. Wir werden dies zu unserem Grün hinzufügen, die Daten i plus 1. Dann fügen wir diese zu unserem Blau hinzu, das sind Daten i plus 2. Alles, was wir hier tun, ist, fügen Sie einfach alle drei unserer Farben für jedes Pixel auf dem Bildschirm zusammen . Um dies zu einem Grauton zu reduzieren, müssen wir auch diese drei Werte manipulieren. Also der rote Wert, wir müssen dies mit 0,21 multiplizieren, die grüne Farbe, die in der Mitte ist, multiplizieren Sie dies mit 0,71 und das Blau wird mit 0,07 multipliziert. Jetzt gibt es keine harte und schnelle Regel, die wir für diese graue Farbe verwenden müssen. Dies ist einfach eine Formel, die bei der Recherche des Themas gefunden wird. Wir können hier beliebige unterschiedliche Werte verwenden. Jetzt können wir unseren Grauwert greifen und diesen als unser Rot setzen, auch als unser Grün, und auch als unsere blauen Werte. Lassen Sie uns das im Browser testen. Wir können aktualisieren, wählen Sie ein neues Bild. Lassen Sie uns unsere Graustufeneffekte ausprobieren. Gut, unsere Graustufen funktioniert jetzt und nächste Woche werden wir zum Sepia-Effekt übergehen , der im Grunde eine wärmere Version eines Graustufenbildes ist. All diese Funktionen werden ähnlich sein, so können wir unsere Graustufenfunktion kopieren und diese direkt unten hinzufügen. Dieser hier nennt man Sepia. Wir greifen immer noch alle Bilddaten ein, aber dieses Mal müssen wir dies auf eine etwas andere Art und Weise manipulieren. Wir werden also die graue Grundfarbe aus der Graustufenfunktion verwenden, aber stattdessen werden wir einige zusätzliche rote und grüne Werte hinzufügen. Also für den roten Wert, der zuerst ist, können wir 95 hinzufügen, einen grünen Wert, wir werden 58 hinzufügen, und dies wird unserem Bild einen etwas wärmeren Ton geben. Wir können diese Funktion dann über unsere zweite Taste aufrufen. Lassen Sie uns dies kopieren, QuerySelectorAll und dann können wir unsere zweite Schaltfläche mit der Indexnummer von 1 auswählen, die Funktion ist Sepia. Probieren wir das aus. Sehen Sie sich als Bild an und klicken Sie auf die Schaltfläche. Dies gibt uns diese wärmere Version unseres Graustufenbildes. Als nächstes haben wir die Invert-Funktion, also kopieren wir die Sepia-Funktion. Fügen Sie dies direkt unten hinzu. Das ist unsere Invert-Funktion. Unter dem Invertierungseffekt ist auch als umgekehrtes Bild bekannt. Die Farben werden umgekehrt, zum Beispiel wird ein Schwarz weiß und so weiter. Dies wird uns einen ähnlichen Effekt wie Fotonegative im alten Stil geben, die wir bei der Entwicklung von Fotos erhalten haben. Für invertieren müssen wir diesen grauen Abschnitt nicht verwenden, also können wir diese Zeile hier löschen, stattdessen müssen wir den Wert von 255 von jeder unserer Farben abziehen. Der Grund, warum wir dies tun, ist, weil ein RGB-Wert von 0-255 gehen wird. Wenn wir 255 abziehen, wird uns dies den gegenteiligen Effekt geben. Für Daten i, die rot ist und ziehen die Daten i Grünwert, wir tun genau das gleiche, das ist 255, und dann ziehen Daten i plus 1. Das Blau, das ist 255, und dann Daten abziehen i plus 2. Wir färben diese dann mit unserer Taste und diese Taste ist Position 2, und der Funktionsname ist invert. Probieren wir das aus. Hier ist die Akte. Das hier funktioniert jetzt auch. Jetzt haben wir unsere ersten drei Buttons angeschlossen, wir gehen jetzt zum nächsten Video, wo wir dann alle Pixelwerte austauschen, um uns unsere letzten vier Effekte zu geben. 10. Zusätzliche Effekte hinzufügen: Die nächsten Dateifunktionen, die wir hinzufügen werden, werden nur ein Fall sein, um unsere roten, blauen und grünen Werte zu wechseln . Wir beginnen mit der Änderung unserer Rot-, Grün- und Blauwerte in Rot, Blau und Grün. Lassen Sie uns unsere letzte Funktion greifen und wir können dies direkt unten duplizieren. Der Funktionsname wird rbg sein. Was wir hier tun wollen, ist, das Rot, Grün und Blau zu wechseln , um dann rot, blau und dann grün zu sein . Für diese bleibt das Rot gleich, alles, was wir tun müssen, ist, den ersten Wert auf Rot zu setzen , das sind Daten [i]. Der zweite Wert, der gerade hier ist, wird dieser gleich blau sein. Blau ist unser dritter Wert von i plus 2, lasst uns das ändern. Dann wird unser dritter Wert grün sein, was i plus 1 ist. Dies ist unsere freien Farben jetzt ausgeschaltet. Bei dieser Funktion gibt es jedoch ein kleines Problem. Wir setzen den roten Wert auf den roten Wert, was völlig in Ordnung ist. Wir setzen dann einen beliebigen grünen Wert auf blau, was auch in Ordnung ist. Allerdings haben wir nun den Bildschirmwert neu zugewiesen, um eine andere Farbe zu haben. Nun, wenn wir versuchen, diese grüne Farbe ganz am Ende hier zuzuweisen, wird diese jetzt ersetzt. Dies bedeutet, dass es nicht die ursprüngliche grüne Farbe für jede Schleife nach unserer ersten ist. Wenn wir einen dieser Werte überschreiben und sie dann wiederverwenden, müssen wir dann die ursprüngliche Farbe innerhalb einer Variablen speichern. Wir setzen eine Const, und das ist unser grüner Wert. Stellen Sie dies gleich Daten i plus 1. Dies wird immer der ursprüngliche Grünwert sein. Deshalb, wenn wir dies erhalten, wird sich ändern. Aber wir können auch auf den ursprünglichen grünen Wert zugreifen, nachdem wir dies geändert haben. Nur um zusammenzufassen, wenn wir alle unsere Pixel durchlaufen, überschreiben wir unseren grünen Wert mit diesem Blau. Deshalb, wenn wir versuchen, dies unten unten zu verwenden, wieder, werden wir nicht mehr die ursprüngliche Farbe haben. Daher müssen wir dies in einer Konstante direkt oben speichern. Nun lassen Sie uns unseren Klick „Listener“ duplizieren lassen Sie uns in Nummer 3 setzen, jede Funktion ist rbg. Lassen Sie uns dies versuchen, wählen Sie eine neue Datei. Unsere Funktion funktioniert jetzt. Lassen Sie uns nun unsere roten, grünen und blauen Werte durch Blau, Grün und Rot austauschen , also kopieren Sie diese Funktion. Die zweite wird bgr genannt werden. Die erste Farbe ersetzen wir unser Rot durch den blauen Wert. Dies sind Daten i plus 2. Der zweite Wert wird grün sein, und das ist i plus eins. Der dritte Wert ist unsere Farbe von Rot, die Daten i sind. Aber, genau wie oben, ersetzen wir unsere Daten i Wert durch eine andere Farbe. Daher können wir unsere ursprünglichen Daten i innerhalb einer Variablen namens rot speichern und dies als unseren dritten Wert setzen. Verknüpfen Sie dies mit unserer Schaltfläche. Das hier ist Taste Nummer 4. Der Funktionsname von bgr. Lassen Sie uns das hier ausprobieren. Die bgr-Farbe funktioniert auch. Wir haben zwei weitere, der nächste ist gbr, also kopieren Sie unsere letzte Funktion. Wir nennen das, der erste, den wir ändern müssen, ist unsere grüne Farbe. Wir müssen i plus 1 setzen. Der zweite Wert ist blau, das ist unser i plus 2. Der dritte ist unser roter Wert, der Daten [i] ist. Genau wie bei der Verlustfunktion überschreiben wir Daten [i]. Wir können diese rote Konstante nutzen und diese als unseren dritten Wert aktualisieren. Wir können dies mit unserer Schaltfläche verknüpfen, die Taste Nummer 5 ist, und dem Funktionsnamen von gbr. Lassen Sie uns dieses versuchen, wählen Sie unsere Datei. Dieses funktioniert jetzt auch, was uns zum allerletzten Knopf bewegt, nämlich unsere roten, grünen und blauen Werte durch grün, rot und blau zu ersetzen . Dupliziert unsere Funktion namens grb. Der erste Wert ist grün, und dieser ist derzeit festgelegt, also ist das in Ordnung. Der zweite Wert von Rot sind Daten [i] und da wir dies während der Schleife aktualisieren, können wir auch die ursprüngliche rote Farbe verwenden, die in dieser Konstante gespeichert ist. Der letzte Wert ist genau gleich zu bleiben. Dies ist auch blau 2. Dies sind Daten i plus 2. Wir können dies mit unserer allerletzten Taste innerhalb dieses Abschnitts verknüpfen und dies ist Taste Nummer 6, und die Funktion von grb. Rüber zum Browser. Klicken Sie auf diese Schaltfläche und unsere letzte Funktion funktioniert jetzt. Dies ist jetzt alle unsere Bildeffekte funktionieren. Um dieses Projekt im nächsten Video abzuschließen, werden wir unseren Clear Button einrichten, um alle Effekte zu entfernen und das Originalbild wieder einzusetzen und dies auch so einzurichten, dass wir unser Foto aus dem Browser herunterladen können. 11. Bild löschen und herunterladen: Die letzten Schritte für dieses Projekt besteht darin, die Funktionalität hinzuzufügen , um alle Effekte aus dem Originalbild zu löschen, und auch diese Schaltfläche zum Herunterladen einzurichten. Wir beginnen mit der Schaltfläche Löschen, die alle angewendeten Effekte entfernt und das ursprüngliche Bild wieder einsetzt. Die Anwendung ist ziemlich unkompliziert. Alles, was wir tun werden, ist eine Funktion zu schreiben, die ausgelöst wird, wenn die Clear Taste gedrückt wird. Dies wird dann auf die ursprünglichen Ergebnisse des Dateilesers zugreifen, und dann können wir es als Bildquelle festlegen. Gehen wir zurück zu unserem Skript und lassen Sie uns eine neue Funktion namens ClearChanges erstellen. Lassen Sie uns zunächst ein Konsolenprotokoll für unseren FileReader machen, und dann können wir unsere Funktion von unserer Clear Taste aufrufen, die Indexnummer 7 ist. Probieren wir das aus. Oben im Browser können wir in die Entwickler-Tools gehen, in die Konsole. Wenn wir auf den Clear klicken, haben wir jetzt Zugriff auf unsere FileReader. Genau wie früher, bevor wir ein Bild setzen, sehen wir, dass das Ergebnis auf null gesetzt ist. Aber wenn wir ein Bild hochladen und dann auf Clear klicken, dann erhalten wir eine neue FileReader-Ergebnisse mit den Ergebnissen unseres Bildes. Wir können nun auf diese FileReader.Result zugreifen, und dann die Bildquelle festlegen. Lassen Sie uns das Konsolenprotokoll entfernen. Wir können dann auf unsere Bildvariable zugreifen und die Quelle so einstellen, dass sie gleich dem reader.result ist. Probieren wir das aus. Das erste, was wir tun müssen, ist, jeden Effekt wie Invertieren anzuwenden. Löschen Sie das, und wir haben jetzt Zugriff auf das Originalbild. Schließlich haben wir auch den Download-Button, dem der Benutzer das Bild herunterladen kann, nachdem er irgendwelche Effekte platziert hat. Über zu unserem Skript, können wir dies als eine Funktion namens Download erstellen. Dann im Inneren hier werden wir eine Konstante schaffen, um unser Bild zu speichern. Wir schneiden das Bild, das Sie von der Leinwand wollen, und verwenden Sie dann eine Methode namens ToDataURL. ToDataUrl gibt die URL unseres Canvas-Bildes in einem Standard-PNG-Bildformat zurück. Wenn wir dies in einem anderen Format wollten, könnten wir dies in image.jpeg ändern. Wenn die Browserunterstützung dies zulässt, können wir auch WebP2 verwenden. Ich werde dies nur als Standard-PNG betrachten, und wie bereits erwähnt, wird dieses ToDataURL die Bild-URL zurückgeben. Wie gehen wir eigentlich über das Herunterladen dieses Bildes? Nun, wir können eine Bild-URL mit einem Link herunterladen. Wir können einen Link mit dem a-Element erstellen, und die Art und Weise, wie wir dies tun, ist document.createElement, das einen Link für uns erstellen wird, und wir können unseren Link im Inneren hier erstellen , der ein Element ist. Speichern Sie dies innerhalb einer Konstante namens link. Genau wie jeder normale HTML-Link können wir auch darauf zugreifen und die href setzen. Die href ist die URL, zu der wir verlinken werden, und wir haben bereits unsere URL direkt oben innerhalb dieser Bildvariablen gespeichert. Als nächstes werden wir auch auf unseren Link zugreifen und das Download-Attribut hinzufügen, indem wir dies auf gleich image.png setzen. Diese Download-Attribute, die wir gerade zu unserem Link hinzugefügt haben , geben an , dass das Ziel heruntergeladen wird, wenn der Benutzer auf diesen Link klickt. Das bedeutet, wenn ein Benutzer auf diesen Link klickt, wird er herunterladen, was auf die href gesetzt ist, das ist unser Bild. Was wir jetzt effektiv gemacht haben, ist ein gefälschtes HTML-Link-Element erstellt, das wir nicht im Browser angezeigt haben. Dies bedeutet, weil der Link nicht im Browser angezeigt wird, können wir nicht auf die übliche Weise klicken, um dieses Bild herunterzuladen. Stattdessen können wir einen Mausklick auf ein Element mit der Klick-Methode simulieren. Um auf unsere will-Link-Elemente zuzugreifen, rufen Sie die Click-Methode auf und lassen Sie uns diese Download-Funktion mit unserer Schaltfläche verknüpfen. Dies ist die Schaltfläche Nummer 8, die unsere Download-Methode auslöst und wir können das Bild auswählen, um dies zu testen. Wählen Sie einen dieser Effekte aus, klicken Sie auf Download. Es scheint ein Problem zu geben, also gehen wir in die Konsole, wir können mit der rechten Maustaste klicken und überprüfen. Wir werden sehen, dass Canvas.toDataUrl keine Funktion ist, also gehen wir zu unserer Download-Funktion. Ich denke, wir brauchen nur Änderungen, um Großbuchstaben für URL zu sein. Lasst uns das versuchen. Wählen Sie eine Datei aus. Klicken Sie auf den Download, und unser Bild ist jetzt heruntergeladen. Dies lässt uns jetzt mit einem funktionierenden Clear and Download Button. Vielen Dank, dass Sie dieses Projekt übernommen haben, und ich werde Sie im nächsten sehen. 12. Folge mir auf Skillshare!: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Also nochmals vielen Dank, viel Glück, und hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.