Das Phänomen Instagram hat mich schon immer fasziniert und wie schnell es populär geworden ist. Fotofilter sind nichts Neues, aber der dynamische Einsatz dieser Filter war nicht immer möglich. Der Einbau der Funktionalität in eine iOS / Android-Anwendung erfordert viel Zeit. Glücklicherweise haben die Entwickler daran gearbeitet, diesen Prozess mithilfe von JavaScript für das Web zu replizieren.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie mit jQuery eine einfache Webapp-App im Instagram-Stil erstellen. Die Bibliothek heißt CamanJS, die einfach erweitert werden kann, um eigene Filter-Plugins zu erstellen. Dies erfordert nicht jQuery, aber ich habe es für eine einfachere Entwicklungsumgebung gewählt. Schauen Sie sich meine Live-Beispiel-Demo an, um das Ziel dieses Tutorials zu verstehen.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst habe ich eine lokale Kopie von jQuery zusammen mit der CamanJS-Bibliothek auf Github heruntergeladen. Ich sollte darauf hinweisen, dass Sie Ihre Dateien auf einem localhost oder einem externen Server hosten müssen, um die Arbeitseffekte testen zu können. Dies bezieht sich auf ein Problem mit dem Ursprungshost von Canvas-Elementen, das ziemlich verwirrend wird, wenn Sie die Idee noch nicht kennen.
Zusammenfassend: Seien Sie nicht überrascht, wenn Sie die Dateien lokal öffnen und sie nicht funktionieren. Sie müssen sie irgendwo hosten lassen, um dies zu testen.
Meine Indexdatei enthält viele zusätzliche Kommentare, wie Sie Caman implementieren können. Ich habe eine Liste mit Navigationslinks erstellt, die über dem bereits vorhandenen Bild feste Filter anwenden. Nachfolgend finden Sie eine Kopie meines gesamten HTML-Texts:
Beachten Sie den Kommentar, der ein Bild mit der ID verbirgt #mainpic. Dies verwendet einige HTML5-Datenattribute wie Daten-Caman-Hidpi und Daten-Caman. Sie können tatsächlich eine Reihe vordefinierter Filter festlegen, die sofort auf das Foto geladen werden. Dadurch wird ein neues Canvas-Element direkt in die Seite eingefügt, ohne dass JavaScript-Code geschrieben werden muss.
Da wir jedoch ein wenig tiefer gehen wollen, habe ich ein einzelnes Canvas-Element mit der ID erstellt #maincanvas. Dies wird verwendet, um das Foto zu laden und wiederholt Filter anzuwenden, bis die Leinwand zurückgesetzt wird.
Das Leinwandbild generieren
Unten auf meiner HTML-Seite habe ich alles JavaScript in ein Paar geschrieben Stichworte. Jeder Link verfügt über einen eigenen Click-Ereignishandler, der verschiedene Filtergrade auf die Leinwand anwendet.
Die Variable Segeltuch richtet das Element als jQuery-Objekt an, aber es ist kein natürliches Zeichenelement. Die Leinwand selbst erhalten wir durch Verwendung von Leinwand [0] was hilfreich ist, um Details über getContext (). Im Allgemeinen können wir in diesem Kontext Objekte aus JavaScript auf die Leinwand schreiben und umschreiben. Die Filterlinks erhalten ihre eigenen jQuery-Variablen, sodass wir sie bei jedem Klickereignis schnell identifizieren können.
Wenn Sie auf die Schaltfläche zum Zurücksetzen klicken, werden alle Filter entfernt und das Bild von Grund auf neu in die Seite eingebettet. Dies erforderte eine Menge Forschung, um herauszufinden, wie die Leinwand aus dem gesamten Kontext gelöscht und das Bild ohne CamanJS-Filter wieder hinzugefügt werden kann. Werfen Sie einen Blick auf diesen Stack Overflow-Beitrag, der ein wenig detaillierter ist.
Grundsätzlich setzen wir die Leinwand auf die gleiche Breite / Höhe zurück, entfernen aber den gesamten Kontext. Der neue Kontext wird neu erstellt, indem ein dynamisches Bildelement mit JavaScript erstellt wird. Caman hat eine Methode namens zurückkehren() um alle Filter zu entfernen und noch einmal von vorne zu beginnen.
Filtermethoden
Der Rest meines Codes wird in Click-Ereignishandlern blockiert. Das bedeutet, wenn ein Benutzer auf einen der Navigationslinks klickt, behandeln wir die Funktion anders. Ich habe eine Reihe von Camans Standardfiltern eingebaut, aber es gibt noch so viele weitere, die es wert sind, erkundet zu werden.
Dies sind die ersten vier Event-Handler, die dem Foto Helligkeit, Rauschen, Kontrast und Sepia-Farbe verleihen. Der in die Methode übergebene numerische Wert legt fest, wie viel Filterstärke angewendet werden soll. Die Zahlen reichen normalerweise von 0-100, aber es hängt wirklich von der aufgerufenen Methode ab.
Die Syntax ist sehr einfach zu erlernen, sobald Sie sie wirklich angesehen haben. Caman () ist die Initialisierungsmethode, die zuerst den Canvas-Selector übernimmt, gefolgt vom zu filternden Bild.In einer Callback-Funktion definieren wir dann, welche Filter angewendet werden sollen. Die Filter werden mit auf die Bildleinwand angewendet machen().
Jeder dieser Filter wird mit der Zeit zusammengesetzt. Wenn Sie beispielsweise zweimal auf Sepia klicken, erhalten Sie zwei wiederholte Filtereffekte mit Sepia-Tönen. Ich habe alles auf einem niedrigeren Wert von 10-20 gehalten, so dass Sie den inkrementellen Unterschied beobachten können.
Mein letztes Schaltflächenereignis fügt eine sehr leichte Farbüberlagerung an das Bild an. Dies verhält sich wie ein Deckkraftfilter, der eine durchgehende Farbe als Hintergrund verwendet. Beachten Sie, dass die Syntax RGB- oder Hexadezimal-Farbwerte akzeptiert. Sehen Sie sich die integrierte Funktionalität von Caman an, um noch mehr Filtereffekte zu finden.
Live Demo - Quellcode herunterladen
Schließen
Es wird wahrscheinlich nicht zu viele Projekte geben, bei denen Sie diese Fotoeffekte replizieren müssen. Es macht aber immer Spaß, sich mit neuen JS-Bibliotheken herumzubewegen, und Sie wissen nie, wann es anwendbar ist. Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen und zu sehen, was Sie sonst noch bauen können. Wenn Sie Fragen oder Kommentare haben, lassen Sie einige Ideen in den Kommentaren unten fallen.