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

Das Wunder des Live Reloads Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochen...
Syntax Highlighting in Javascript Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Fing...
HTML5 Canvas in einfach – KineticJS Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...

Schreibe einen Kommentar

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