‫-: In diesem Video lernen Sie die Bildbearbeitung
‫und -manipulation mit Node JS kennen, und in
‫diesem speziellen Fall werden
‫wir unsere Bilder skalieren und konvertieren.
‫Wir gehen also überall in unserer
‫Benutzeroberfläche davon aus, dass die hochgeladenen Bilder Quadrate sind.
‫Damit wir sie dann
‫als Kreise wie folgt darstellen können.
‫Dies funktioniert also nur, wenn es sich
‫um Quadrate handelt, aber
‫in der realen Welt werden Benutzer natürlich selten
‫Bilder hochladen, die Quadrate sind.
‫Unsere Aufgabe ist es jetzt, die
‫Größe der Bilder zu ändern, um sie quadratisch zu machen.
‫Okay, und so werden wir das machen.
‫Wir werden vor dem Update noch eine Middleware hinzufügen
‫und dann übernimmt
‫diese Middleware die eigentliche Bildverarbeitung.
‫Okay, also lass es uns hier im Code direkt
‫nach diesem machen,
‫weil sie irgendwie verbunden sind, nicht wahr?
‫Exportieren Sie also
‫Punkt, ändern Sie die Größe des Benutzerfotos.
‫Und bevor wir fortfahren, fügen
‫wir diese Middleware auf dieser speziellen Route tatsächlich
‫zum Middleware-Stack hinzu.
‫Das ist also in
‫Benutzerrouten, und hier, direkt nachdem das Foto
‫in diese
‫Middleware hochgeladen wurde, werden wir es dann skalieren.
‫Ändern Sie also die Größe, und hier ist
‫es tatsächlich der Benutzer-Controller.
‫In Ordung.
‫Lass uns hier
‫runter gehen und wieder zurück.
‫Und so haben wir zu diesem Zeitpunkt
‫bereits die Datei auf unsere Anfrage.
‫Zumindest wenn es einen Upload gab,
‫und wenn es keinen
‫Upload gab, dann wollen wir natürlich nichts machen.
‫Das bedeutet also, dass wir zur nächsten Middleware übergehen wollen.
‫Wenn es also keine Datei zu
‫der Anfrage gibt, kehren Sie sofort zurück und gehen Sie zum nächsten.
‫Okay, aber ansonsten wollen wir
‫natürlich die Bildgröße ändern.
‫Und dafür werden wir das scharfe Paket verwenden.
‫In Ordung.
‫Also, lass es uns zuerst einmal installieren.
‫Also MPM installieren Sie scharf. Okay,
‫und da das seine Arbeit tut, lassen Sie
‫uns das hier schon einfügen.
‫So
‫scharf, und erfordern, scharf.
‫Und Sharp ist eine wirklich schöne
‫und einfach zu verwendende Bildverarbeitungsbibliothek für Node Js. Und es gibt ziemlich
‫viele Dinge, die wir
‫damit machen können.
‫Aber wo es wirklich glänzt,
‫ist die Größenänderung von Bildern auf sehr einfache Weise.
‫Und genau das suchen wir hier.
‫In Ordung.
‫Also sagen wir scharf und dann müssen wir hier
‫im Grunde die Datei übergeben.
‫Wenn Sie nun eine solche Bildbearbeitung direkt nach
‫dem Hochladen einer Datei durchführen,
‫ist es immer am besten, die Datei nicht einmal auf
‫der Festplatte zu speichern, sondern sie stattdessen im Speicher zu speichern.
‫Darüber haben wir schon früher gesprochen,
‫und das macht man jetzt auch in der Praxis.
‫Okay, dafür müssen wir also
‫ein bisschen die Multer-Konfiguration ändern und
‫eigentlich nur diesen Multer-Speicher,
‫denn jetzt brauchen wir nichts mehr davon.
‫Und anstelle
‫von Multer-Speicher wird einfach Multer-Punkt-Speicher verwendet.
‫Und einfach so, okay?
‫Und wie ich bereits erwähnt
‫habe, wird das Bild auf diese Weise dann als Puffer gespeichert.
‫Und damit dieser Puffer dann auf
‫Anfrage verfügbar ist dot file dot buffer und das ist so viel
‫effizienter, also anstatt die Datei auf
‫die Festplatte zu schreiben und dann hier
‫erneut zu lesen.
‫Wir behalten das Bild einfach im Grunde im
‫Gedächtnis und dann können wir das hier lesen, in Ordnung?
‫Wie auch immer, wenn Sie die
‫Sharp-Funktion wie diese hier aufrufen, wird dann ein Objekt erstellt,
‫an dem wir mehrere Methoden verketten können, um unsere Bildverarbeitung durchzuführen.
‫Das erste, was wir tun werden, ist die Größenänderung.
‫Ändern Sie die Größe, und dann können wir hier die
‫Breite und die Höhe angeben.
‫Sagen wir also 500 und 500. Denken Sie also daran,
‫dass wir quadratische Bilder haben
‫möchten, und natürlich muss die Höhe
‫der Breite entsprechen.
‫Nun wird das Bild
‫so beschnitten, dass es die gesamten 500 mal 500 Quadrate bedeckt.
‫Und tatsächlich können
‫wir dieses Standardverhalten ändern, wenn wir möchten.
‫Werfen wir also noch einmal einen kurzen Blick
‫in die Dokumentation.
‫Sagen wir also, github scharf, aber eigentlich ist ihre
‫eigene Website ein
‫bisschen besser, ein bisschen vollständiger.
‫Also lasst uns hier auf diesen Link klicken, und dann
‫können wir hier zur Größenänderung kommen, was
‫wir gerade tun, und
‫dann habe ich gerade darüber gesprochen.
‫In Ordnung, die Standardeinstellung hier ist, dass
‫das Bild beschnitten
‫wird, um beide bereitgestellten Abmessungen abzudecken.
‫Wir können aber auch enthalten, füllen, innen oder außen wählen.
‫Und wir würden dies tun, indem wir die Optionen hier einstellen.
‫Wir können also Breite und Höhe festlegen und dann
‫als dritte Option dieses Optionsobjekt
‫festlegen, in dem wir dann die Passform definieren können.
‫Wir könnten auch die Position definieren,
‫die standardmäßig zentriert ist.
‫Sie sehen, es gibt alle
‫möglichen Dinge, die wir wirklich definieren könnten, um unsere
‫Bildverarbeitung zu verfeinern.
‫Aber in diesem Fall reicht das, was wir haben.
‫Kommen wir also zum nächsten Schritt.
‫Denn als nächstes möchte ich
‫die Bilder eigentlich immer in JPEG umwandeln, okay?
‫Und dafür verwenden wir to format
‫und dann jpeg.
‫Wir können dann auch die Qualität dieses JPEGs definieren.
‫Also im Grunde, um
‫es ein wenig zu komprimieren,
‫damit es nicht so viel Platz einnimmt, und dafür verwenden
‫wir die jpeg-Methode und setzen eine Option in diesem Objekt mit Qualität und
‫sagen wir hier 90 Prozent, in Ordnung?
‫Also jede Methode hier in eine eigene Zeile,
‫das ist viel schöner, aber eigentlich sind wir noch nicht fertig.
‫Wir sind fast fertig, aber nicht ganz.
‫Denn jetzt, am
‫Ende, wollen wir es dann endlich in eine Datei auf unserer Platte schreiben.
‫Und dafür können wir to file verwenden, jetzt
‫benötigt diese Methode hier
‫tatsächlich den gesamten Pfad zur Datei.
‫Also im Grunde
‫öffentliche Bilder, Schrägstrich, Benutzer und schließlich
‫hier der Dateiname, in Ordnung?
‫Also lasst uns das tatsächlich von
‫dem bekommen, was wir hier zuvor hatten.
‫Denn natürlich möchten wir, dass unsere Bilder
‫ein ähnliches Format haben.
‫Okay, also kopieren wir das.
‫Aber eigentlich werde ich es hier nicht richtig stellen.
‫Stattdessen werde ich es
‫tatsächlich speichern, um den Punktdateinamen der Punktdatei anzufordern.
‫Warum mache ich das jetzt so?
‫Nun, es liegt daran, dass dieser Dateiname
‫im Moment nicht definiert ist.
‫Wenn wir uns also entscheiden, das Bild als Puffer im Speicher
‫zu speichern, wird der Dateiname nicht wirklich festgelegt, aber
‫wir brauchen diesen Dateinamen
‫wirklich in unserer anderen Middleware-Funktion, richtig?
‫Das ist also hier unten, um mich hier zu aktualisieren.
‫Wir verlassen uns also auf die Anforderung
‫Punktdatei Punktdateiname, um den Dateinamen in unserer Datenbank zu speichern, oder?
‫Und eigentlich sollten wir das definieren.
‫Und so war es vorher natürlich
‫durch den Multer-Upload definiert, den wir hatten, aber da
‫der jetzt weg ist, sollten wir ihn hier im Grunde neu definieren.
‫Okay?
‫Dann können wir hier eigentlich diesen
‫Teil der Erweiterung loswerden, da wir bereits wissen,
‫dass es immer ein jpeg sein wird.
‫Aus diesem Grund zu formatieren, okay?
‫Also können wir hier einfach jpeg setzen.
‫Es ist also nicht erforderlich, die Dateierweiterung abzurufen.
‫Und so können
‫wir das jetzt hier verwenden.
‫Req Punktdatei Punktdateiname, und das ist
‫es tatsächlich.
‫Okay?
‫Jetzt müssen wir also nur
‫noch die nächste Middleware im Stack aufrufen, um den Vorgang abzuschließen.
‫Und das wird die Update-Me-Handler-Funktion sein.
‫Lassen Sie uns das jetzt natürlich testen.
‫Diese brauchen wir also nicht mehr.
‫Kommen wir zu Postman, und
‫jetzt heißt der
‫Benutzer, den ich aktualisieren möchte, arrav, denke ich.
‫Schauen wir uns hier ganz schnell unsere Daten an.
‫Also ja, dies ist das nicht quadratische Bild, das wir
‫jetzt hochladen werden, und tatsächlich sehen
‫Sie hier die Größe, die
‫1000 mal 1500 beträgt, und vergleichen wir das
‫später mit unserem hochgeladenen Bild
‫mit geänderter Größe.
‫In Ordung.
‫Wie auch immer, lass uns jetzt
‫den Namen für arrav bekommen Eigentlich brauchen wir nicht,
‫sie sind immer gleich, also arrav so, also lass uns einloggen.
‫Damit wir es dann aktualisieren
‫können und Sie sehen, dass im Moment das Bild hier Benutzer 11 ist.
‫Und nur um es ein
‫bisschen besser zu sehen, lassen
‫Sie uns mit diesem Benutzer tatsächlich in unserer Webanwendung aktualisieren und
‫sich einloggen.
‫Testen Sie also eins, zwei, drei, vier.
‫In Ordnung, das ist das aktuelle Bild
‫und jetzt können wir es aktualisieren.
‫Wählen Sie Dateien aus, und hier ist
‫unser Bild, öffnen Sie das und sehen wir, was passiert.
‫Und wir sind fertig.
‫Das ging eigentlich sehr
‫schnell, also mal sehen ob es richtig ist.
‫Zumindest scheint der Name hier richtig zu sein.
‫Wenn wir uns unsere Nutzer jetzt hier ansehen, dann in
‫der Öffentlichkeit oder direkt hier.
‫Das sollte also das sein, was es
‫eigentlich nicht ist.
‫Und tatsächlich ist es nirgendwo zu finden.
‫Lass uns neu laden, ah, und
‫hier ist es.
‫Nun, das ist es.
‫Sie sehen also, dass es jetzt 500 mal 500
‫ist, hier ist es
‫viel kleiner, also 55 im Vergleich zu den 315, die wir vorher hatten.
‫Das ist also
‫viel besser, und wie Sie hier sehen werden, sollte
‫es jetzt auch hier aktualisiert werden.
‫Und das ist perfekt.
‫Das Gesicht ist hier also tatsächlich mittendrin.
‫Die Größenänderung lief also wirklich perfekt.
‫Cool.
‫Und ich hoffe, Sie
‫finden auch in Ihren eigenen Anwendungen
‫Verwendung für diese Art der Bildbearbeitung.
‫Also nur um kurz zusammenzufassen, was wir hier gemacht haben.
‫Nun, wir haben eine neue Middleware-Funktion erstellt,
‫die direkt nach dem Hochladen
‫des Fotos ausgeführt wird.
‫Und dieser Upload erfolgt nun
‫tatsächlich in einen Puffer und nicht mehr direkt in das Dateisystem.
‫Rechts?
‫Und deshalb verwenden wir hier diesen
‫Speicher, aber natürlich funktioniert dieser Multer-Filter
‫hier noch.
‫Wir können also immer noch nur Bilder hochladen, in Ordnung?
‫Also geben wir hier in dieser Middleware
‫den Dateinamen des Bildes auf
‫Anforderung Punktdatei Punktdateiname ein, damit wir ihn
‫dann in der Aktualisierung verwenden können.
‫Okay, und dann haben wir hier
‫die eigentliche Bildbearbeitung selbst.
‫Wo wir zuerst die Größe auf ein Quadrat
‫geändert und dann zu
‫einem JPEG mit einer Qualität von 90 Prozent
‫formatiert haben, und schließlich schreiben wir diese Datei
‫dann in unser Dateisystem in genau denselben Ordner, den wir auch zuvor angegeben haben.
‫Okay, so funktioniert es, wenn Sie
‫etwas Bildbearbeitung benötigen,
‫aber wenn Sie es nicht brauchen,
‫können Sie es natürlich so weiter verwenden, okay?
‫Und deshalb ist es wirklich
‫wichtig, dass wir
‫hier beide Wege kennengelernt haben.
‫Okay, als nächstes im nächsten Video
‫werden wir dann dieses Formular hier tatsächlich zum Laufen
‫bringen, damit wir direkt von hier
‫aus Benutzerfotos hochladen können.