Wasserzeichen mit JavaScript und dem Canvas-Element

Angenommen man besitzt einen Shop, angenommen man verkauft tausende Artikel die vom gleichen Großhändler kommen. Der Großhändler besitzt natürlich keine Produktbilder und angenommen man stellt diese in tagelanger Kleinarbeit her. Angenommen es existiert ein zweiter Shop, angenommen er hat den gleichen Großhändler und angenommen er besitzt ebenfalls keine Bilder. Wo versucht er diese wohl herzubekommen?

Wasserzeichen, eingefügt mit watermark.js

Blödsinn? Sicherlich nicht – man braucht da nur mal bei eBay vorbei zu schauen. Wenn man sich die Mühe macht die Bilder selbst herzustellen, und man davon ausgehen kann das ein zweiter Shop ebenfalls solche Bilder benötigt, dann rücken immer mehr Shops den Bilder mit einem Wasserzeichen zu Leibe.

Was sich am Anfang noch einfach anhört, stellt sich ebenfalls als ziemlich viel Arbeit heraus. Drupal kann zum Beispiel mit den ImageCache Actions über die gd allerhand Unfug mit den Bildern treiben. Magento kann Wasserzeichen bereits im Core und alle haben die dumme Angewohnheit, das es natürlich so ist, das die Bilder mehrmals auf der Platte liegen (mit Wasserzeichen / ohne Wasserzeichen – zumeist in verschiedenen Auflösungen).

Viel spaßiger ist es da, die Wasserzeichen mittels HTML-Canvas zu erzeugen. Die Vorteile sind klar die Entlastung des Servers, Nachteil ist die Vereinfachung des „Diebstahls“ des Bildmaterials, da im Quelltext der HTML-Seite eine Referenz auf das Original-Bild vorliegt.

Wer dem Durchschnittsuser allerdings ein Wasserzeichen präsentieren möchte, der ist mit watermark.js gut bedient. Es ermöglicht das einfache Einbinden von Wasserzeichen mittels einfachstem HTML und dürfte ein Großteil der durch ein Wasserzeichen bedingten Aufgaben erfüllen.

Ähnliche Beiträge

Cartoview – Mashups Made Simple Zu jeder besseren Web2.0-Anwendung gehört heutzutage eine Map, sei es nur um Daten zu visualisieren, aber auch zur Nutzung von Location Based Services...
jwerty – JavaScript Keyboard Events vom Fein... Keyboard Events in Javascript sind in Backends das vielleicht am meisten unterschätze Feature! Wenn man mal ehrlich ist: man benutzt die Tastatur kaum...
Tutorial Google Maps API – die Anfänge mit JavaScr... Wie versprochen kommt heute der erste Teil des Google Maps Tutorials, dass sich primär mit der API an sich und JavaScript beschäftigen wird. Bevor wir...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.