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


Favicon mit Javascript austauschen
Nach meiner bescheidenen Meinung sind Favicons innerhalb einer Webanwendung die Elemente, denen die wenigste Beachtung geschenkt wird. Ich habe ja sch...


Underscore.string – String Manipulation für ...
Drücken wir es nett aus: JavaScript und Strings sind keine guten Freunde. Vielleicht bin ich da etwas zu verwöhnt, aber ein bisschen geschickter hätte...


Heatmap mit dem HTML5 Canvas Element
Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...


HTML5 Cheat Sheets
Ok, es sind nur zwei, aber mehr braucht man auch (erstmal) nicht ;) HTML5 bietet viele neue Möglichkeiten, die nicht nur Videos und Audio betreffen, s...

Schreibe einen Kommentar

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