Tutorial Bild mit Wasserzeichen

Mit diesem kleinen PHP-Skript von Webbausteine.de kann man jedes Bild mit einem Wasserzeichen versehen ohne das Bild mit einem Grafik-Programm bearbeiten zu müssen. Gleichzeitig kann man auch das Bild nicht einfach so mittels Rechtsklick downloaden, sondern nur das mittels des Skriptes modifizierte Bild inklusive Wasserzeichen - was natürlich keinerlei Bildschutz bedeuten kann.

Ich habe hier zwei Beispiele von Webbausteine.de in NetObjects Fusion (NOF) eingebaut.

Obere Bild

Dieses Bild verwendet einen Text, der in das Skript (hier habe ich das Skript “wasserzeichen.php” genannt) eingetragen wird. Die Deckkraft steht auf 25%, die Ihr natürlich beliebig ändern könnt. Die Position vom Text habe ich mit -25 Pixeln vom unteren Bildrand in der Höhe eingetragen.

<?php
// Bild mit Wasserzeichen markieren (JPEG-Bilder)
// Transparenten Text hinzufügen

if (isset($_GET["bild"])) {
 if (file_exists($_GET["bild"])) {
  $bild = $_GET["bild"];

  $text = "Bild von: bilder.n3po.com";
  $farbe = "#00FF7F"; // Bsp: #00FF7F
  $size = 5; // Schriftgröße 1 - 5
  $transparenz = 25; // Tranzparenz: 0 - 100 (100 = keine Transp.)

  $bildInfo = getImageSize($bild);
  $bildKopie = imageCreateFromJPEG($bild);
  sscanf($farbe, "#%2x%2x%2x", $r, $g, $b);
  $color = imageColorAllocateAlpha($bildKopie, $r, $g, $b, $transparenz);
  imageString($bildKopie, $size, 5, ($bildInfo[1] -25), $text, $color);

  header("Content-type: image/jpeg");
  imageJPEG($bildKopie);
  imageDestroy($bildKopie);
 }
}
?>

Das Skript oben habe ich in meinen Notepad++ Editor kopiert und im ANSI-Format als

wasserzeichen.php

gespeichert. Wenn Ihr das Skript in UTF-8 speichern wollt, dann achtet darauf, dass Ihr die Kodierung “UTF-8 ohne BOM” verwendet. Dann habe ich diese Datei mit dem Skript in mein Verzeichnis “Assets” von NOF kopiert, welches Ihr im Verzeichnis “User Sites” Eures Projektes finden werdet ...

\User Sites\Bild-mit-Wasserzeichen\Assets

... um es im Anschluss in die Assets-Verwaltung von NOF einzulesen. Damit erreiche ich, dass NOF diese Datei automatisch mit publiziert. In meinem Beispiel wird NOF mein Skript wasserzeichen.php dabei automatisch in das Stammverzeichnis dieses Projektes auf den Server laden.

Nun lest Ihr ebenso das anzuzeigende Bild in der Assets-Verwaltung von NOF ein, welches NOF ebenfalls (ohne weitere Angaben) in das Stammverzeichnis publizieren wird. Vergesst nicht “Datei immer publizieren” anzuhaken.

Nun zieht Ihr Euch ein Textfeld auf und fügt die unten stehende Verlinkung in den HTML-Code Editor des Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen

<img id="Sonnenuntergang" height="305" width="960" src="wasserzeichen.php?bild=sonnenuntergang.jpg" alt="Sonnenuntergang" title="Sonnenuntergang" style="border-radius: 5px; box-shadow: 5px 5px 5px #888888;">

Wie ihr im <img> Tag oben erkennen könnt, wird hier auf die Quelle (src = Source) der Datei wasserzeichen.php zugegriffen und gleichzeitig die Variable bild mit dem Wert meines Bildes sonnenuntergang.jpg für das PHP-Skript belegt. Ihr könnt also das gleiche Wasserzeichen-Skript für jedes beliebige Bild auf der Seite verwenden. Dazu müsst Ihr lediglich der Aktion ?bild= den Dateinamen des jeweiligen Bildes geben. Die Style-Anweisung könnt Ihr natürlich weglassen, die hier meinem Bild noch “runde Ecken” von 5px und einen Schatten gibt.

Bitte achtet auch hier (wie immer) auf die korrekte relative Pfadangabe zu der Datei wasserzeichen.php, die bei mir im gleichen Verzeichnis (hier in meinem Stammverzeichnis) liegt. Sollte diese Datei und das Bild z.B. ein Verzeichnis höher liegen, dann müsste vor der Datei noch ../ stehen = gehe ein Verzeichnis höher.

Untere Bild

Dieses Bild verwendet ein Bild als Wasserzeichen, hier wasserzeichen.png. Die Deckkraft des Wasserzeichen-Bildes habe ich hier auf 50% gestellt, die Ihr natürlich beliebig ändern könnt. Die Postion des Wasserzeichen-Bildes habe ich in der x und y Achse angegeben, somit könnt Ihr das Wasserzeichen an beliebiger Stelle auf dem Bild positionieren. Diese Pixel-Angaben beziehen sich in der Breite auf den rechten und in der Höhe auf den unteren Bildrand.

<?php
// Bild mit Wasserzeichen markieren (JPEG-Bilder)
// Transparentes Bild (Wasserzeichen) hinzufügen

if (isset($_GET["bild"])) {
 if (file_exists($_GET["bild"])) {
  $bild = $_GET["bild"];

  $logo = "wasserzeichen.png";
  $transparenz = 50; // Tranzparenz: 0 - 100 (100 = keine Transp.)

  $wasserzeichen = imageCreateFromPNG($logo);
  $wz_breite = imageSx($wasserzeichen);
  $wz_hoehe = imageSy($wasserzeichen);
  $bildKopie = imageCreateTruecolor($wz_breite, $wz_hoehe);
  $bildKopie = imageCreateFromJPEG($bild);
  $bildKopie_size = getImageSize($bild);
  $x = $bildKopie_size[0] - $wz_breite -25;
  $y = $bildKopie_size[1] - $wz_hoehe -5;
  imageCopyMerge($bildKopie, $wasserzeichen, $x, $y, 0, 0, $wz_breite, $wz_hoehe, $transparenz);

  header("Content-type: image/jpeg");
  imageJPEG($bildKopie);
  imageDestroy($bildKopie);
 }
}
?>

Die Verlinkung zu dem Bild mit der Aktion wird, genauso wie bei dem oberen Bild, in die HTML eines Textfeldes eingetragen.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik