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

AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...
Mit Numeral.js Zahlen formatieren Normalerweise ist der Konstrukt ja wie folgt: MySQL->PHP->Form->PHP->MySQL - das ist ganz nett, bietet aber einige Fallstricke. Normalerwe...
Microjs – Micro-Frameworks für Vanilla Javas... Im Bereich der Webentwicklung herrscht derzeit eine "Totschläger-Mentalität" - erster Schritt beim Aufsetzen einer neuen Seite, bzw. des grundlegenden...
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...

Schreibe einen Kommentar