Schnelle Bild-Overlays mit Cloudinary

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren...

Bei Bild-Overlays geht es nicht nur darum, das richtige Fingerspitzengefühl zu haben, um ein großartiges Bild zu erstellen. Du brauchst auch ein großartiges Tool, das den Prozess erleichtert. Cloudinary, ein Cloud-basierter Bild- und Videoservice für Websites und mobile Anwendungen, ist genau das Werkzeug, das dir an dieser Stelle hilft.

Wie man Bilder überlagert

Als erstes, lege dir einen kostenlosen Cloudinary-Account an, sofern du noch keinen hast. Dann kannst du entweder über die Cloudinary Management-Konsole, oder per API Bilder hochladen. Wenn ein Bild in deinen Cloudinary-Account geladen wird, speicherst du es automatisch auch in der Cloud.

Um ein Overlay zu erstellen, musst du lediglich definieren, wie du das ursprüngliche Bild innerhalb der entsprechenden URL verändern möchtest. Anhand der Anweisungen, die zur URL hinzugefügt werden, wird in Echtzeit ein neues, abgeleitetes Bild verarbeitet und zwischengespeichert. Das Ergebnis wird unverzüglich via Content Delivery Network (CDN) ausgeliefert. Alle folgenden Anfragen an dieselbe URL werden vom Cache aus gestellt.

Hier zeigen wir dir, wie man ein Firmenlogo auf einen Koala legt. Zugegebenermaßen dürfte diese Kombination eher selten vorkommen, die Aufgabe an sich aber durchaus häufig. Mit Cloudinary ist sie einfach. Die ursprüngliche URL des Koala-Bildes lautet:

https://res.cloudinary.com/cld-name/koala.jpg

Die Overlay-URL ist:

https://res.cloudinary.com/cld-name/l_cloudinary_icon,w_200,c_scale/koala.jpg

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Die URL-Struktur ist:

<domain name>/<cloud  name>/<image manipulation parameters>/<image  public-id>.<image format>

Das Overlay wurde erstellt, indem die folgenden Parameter zur URL hinzugefügt wurden:

  • l_<overlay_public_id>
  • w_<width>
  • c_<crop_method>

Für exakte Eindrücke rufe auch die Bild URLs in den Beispielen auf und teste sie.

Die Bild-URL mit JavaScript bauen

Du kannst die Bild-URL selbst erstellen, oder eine von Cloudinarys SDK-Bibliotheken dazu nutzen. In den folgenden Beispielen werde ich die Kern-JavaScript-Bibliothek nutzen, also pures JavaScript. Es gibt auch ein JQuery-Plugin.

Als erstes musst du die JavaScript-Quelle einschließen, welche du vom Cloudinary-Core-Projekt auf Github herunterladen kannst.

<script src="<path>/cloudinary-core-shrinkwrap.js"  type="text/javascript"></script>

Als nächstes fügst du deinen Account-Cloud-Namen zum Code hinzu. Der Account-Name wird bei der Registrierung bei Cloudinary festgelegt. Im folgenden Beispiel ist der Cloud Name “cld-name.”

var cl = cloudinary.Cloudinary.new({cloud_name: "cld-name"});

Jetzt werde ich die hier erstellte cl-Variable nutzen, um alle Cloudinary-Methoden abzurufen. Wenn du JQuery bevorzugst, kannst du das entsprechende Plugin hier finden.

Das ist der JavaScript-Call für die Bild-URL mit Overlay:

cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale" });

Die benutzten Parameter sind die image public_id, hier “koala” und die image overlay public_id, also “cloudinary_icon”. In beiden Fällen steht public_id für den Namen des Bildes in der Cloudinary-Medienbibliothek. Der nächste Parameter ist width = 200 pixels, welcher benutzt wird, um das Overlay-Bild auf eine Breite von 200 Pixeln zu skalieren. Die ausgewählte “scale” Option skaliert das Bild auf die gewünschte Breite, ohne das ursprüngliche Seitenverhältnis zu verändern. Das Ergebnis dieses Calls ist die Overlay-Bild-URL, wie ich bereits demonstriert habe.

Wasserzeichen erstellen

Ein häufiger Anwendungsfall für Bild-Overlays ist das Hinzufügen eines Wasserzeichens. Das ist ein gängiger Weg, Bilder online (urheberrechtlich) zu schützen. Unser Ausgangsbild hat unser Icon schon, aber vielleicht bevorzugst du eine subtilere Darstellung, wie zum Beispiel in Form eines Wasserzeichens. Hier sind die dafür benötigten Parameter:

  • Die Dimensionen des Overlays sind durch width definiert, während crop den Ausschnitt festlegt.
  • Die Platzierung des Overlays ist durch “gravity” definiert
  • Die folgenden visuellen Effekte wurden auf das Overlay angewandt: opacity (Deckkraft) und brightness (Helligkeit)
cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale", gravity: "south_east", opacity: 50, effect: "brightness:200"});

Bild URL:

https://res.cloudinary.com/cld-name/image/upload/l_cloudinary_icon,w_200,c_scale,g_south_east,o_50,e_brightness:200/koala.jpg

Dynamische Text-Overlays

Das Erstellen von dynamischen Text-Overlays öffnet eine neue Welt der Möglichkeiten. Damit ist es sehr einfach, Banner mit den neuesten Angeboten und Werbung aufzufrischen. Google Fonts werden standardmäßig unterstützt, aber du kannst auch eigene Schriften auf deinen Account laden. Das ist nützlich, wenn du zum Beispiel einen besonderen Ausverkauf bewerben möchtest, der nur heute stattfindet.

cl.url("bag", { transformation: [
  {overlay: "text:roboto_60:EXTRA%2010%25%20OFF", color: "white", y: 110}, 
{overlay: "text:roboto_60:SALE%20ENDS%20TODAY", color: "white", y: 200}]});

Image-URL: https://res.cloudinary.com/cld-name/image/upload/l_text:roboto_60:EXTRA 10%25 OFF,co_white,y_110/l_text:roboto_60:SALE ENDS TODAY,co_white,y_200/bag.jpg

Benutzerdefinierte Text-Overlays

Text-Overlays können auch individualisiert werden. Es ist möglich, den Text in deinem Code spontan zu ersetzen, indem du die Informationen nutzt, die in einem Cookie gespeichert wurden. So könntest du jedem Nutzer einen individuellen Text anzuzeigen, der auf Websites basiert, die dieser Nutzer zuvor aufgerufen hat. Um sicher zu gehen, dass der Text auf jeder Hintergrundfarbe sichtbar ist, empfiehlt es sich, eine umrandete Schriftart auszuwählen.

cl.url("gift", {  overlay: " text:arial_80_stroke:Happy%20Birthday%20John", color: "white", gravity: "north", y: 5, border: "2px_solid_black"});

https://res.cloudinary.com/cld-name/image/upload/l_text:arial_80_stroke:Happy Birthday John,co_white,bo_2px_solid_black,g_north,y_5/gift.jpg

Ebenso kannst du sie einbinden, indem du den Cloudinary-Cookie als Parameter in der Bild-URL verwendest. Du brauchst dazu deinen eigenen CName, vergeben durch Cloudinary. Dann würde die URL wie folgt aussehen:

http://CNAME/l_text:arial_80_stroke:__cld_attribute1__,co_white,bo_2px_solid_black,g_north,y_5/ gift.jpg

Der auf dem Bild angezeigte Text ist der Wert des Cookies __cld_attribute1__

Profilbilder aus sozialen Netzen überlagern

Mit Cloudinary ist es auch möglich, dein Profilbild aus sozialen Netzwerken (Facebook, Twitter, Instagram, Google+) zu nehmen und es als Basis für ein Overlay-Bild zu verwenden.

cl.url ("KermitTheFrog", { type: "twitter_name", transformation: [ 
  { width: 150, crop: "scale"} , 
  { overlay: "instagram_name:realmisspiggy",  width: 150, crop: "scale", x: 150 },
{ border: "3px_solid_black"}]});

https://res.cloudinary.com/cld-name/image/twitter_name/w_150,c_scale/l_instagram_name:realmisspiggy,w_150,x_150/bo_3px_solid_black/KermitTheFrog.jpg

Gesichtserkennungs-basiertes Overlay

Um ein cooles Overlay auf Basis der Gesichtserkennung zu erschaffen, ist es hilfreich, wenn das Gesicht möglichst prominent im Bild zu erkennen ist. Das gilt besonders, wenn du versuchst, den venezianischen Maskenkarneval nachzuahmen, wie unten zu sehen ist. Das Overlay wird automatisch auf den Augen platziert, die im Bild erkannt wurden.

cl.url("team.jpg", { transformation: [ 
  { width: 640, crop: "scale",  } , 
{ flags: "region_relative", gravity: "adv_eyes", overlay: "harlequinmask", width: 1.7 }]});

https://res.cloudinary.com/cld-name/image/upload/c_scale,w_640/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg

Eine weitere Möglichkeit ist das automatische Verpixeln von Gesichtern.

cl.url("couple", { width: 640,  crop: "scale", effect: "pixelate_faces:10"});

https://res.cloudinary.com/cld-name/image/upload/w_640,c_scale,e_pixelate_faces:10/couple.jpg

Bild-Overlay auf Videos

Cloudinary unterstützt auch Videos. So kannst du dieselbe API für Interaktionen zwischen Bildern, animierten GIFs und Videos verwenden. Du bist in der Lage, ein animatiertes GIF aus mehreren Bildern zu bauen, ein Bild von einem GIF oder Video-Clip aufzunehmen und sogar ein Bild für eine bestimmte Zeitspanne über ein Video zu legen, wie unten zu sehen ist.

cl.video(  "run", } controls: true, poster: cl.url("run.jpg", {resource_type: "video"}), transformation: [  { overlay: "candy", width: 0.4, gravity: "south_west", start_offset: "5", end_offset: "7.5" }, { overlay: "candy", width: 0.4, gravity: "south_east", start_offset: "8", end_offset: "12", angle: "hflip"}]});

Fazit

In diesem Beitrag konnten wir dir nur die Spitze des Eisbergs zeigen. Cloudinary bietet eine weitaus längere Liste mit Manipulationsoptionen, welche du hier findest. Nahezu ebenso gewaltig sind die Möglichkeit für Videos. Außerdem kannst du Bilder für den Versand optimieren, indem du Funktionen wie automatisches Formatieren und automatische Qualität. verwendest.
Jetzt ist es an der Zeit, dass du hergehst und deine Website-Grafiken verbesserst. Viele Studien haben gezeigt, dass Millennials Bilder Texten sowieso vorziehen.

Disclaimer: Bei diesem Artikel handelt es sich um einen Sponsored Post aus dem Hause Cloudinary.

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

Sortiert nach:   neueste | älteste | beste Bewertung
Heiko Mitschke
Gast

Ein nützliches Hilfsmittel für alle, die nicht gerne mit Grafikprogrammen herumbasteln. Das sieht nach einem interessanten Programm aus, vor allem die Zusatzfunktionen wie Gesichtserkennung usw.

Danke für den Hinweis!

wpDiscuz