Wasserzeichen / Copyright in Bilder setzen

24. Jul 2014

Weblication® liefert Ihnen Werkzeuge dafür, um Bilder mit einem Wasserzeichen-Effekt bzw. Copyright-Hinweis zu versehen.

Weblication® liefert Ihnen Werkzeuge dafür, um Bilder mit einem Wasserzeichen-Effekt bzw. Copyright-Hinweis zu versehen.

Es gibt unterschiedliche Wege und Mittel, um Bilder entsprechend zu manipulieren und mit einem Wasserzeichen-Effekt oder mit einem Copyright-Vermerk zu versehen. Nachfolgend finden Sie entsprechende Möglichkeiten aufgelistet.

1. Über ein Verzeichnisereignis beim Hochladen von Bildern

Um ein Copyright-Hinweis bereits in die Bilder einzufügen, die auf den Server hochgeladen werden, bieten sich die Verzeichnisereignisse an. Beim Hochladen von Bildern greifen Sie hierfür auf das onAfterUpload-Ereignis zurück, das Sie über die Verzeichniseinstellungen erreichen.

Das nachfolgende Beispiel setzt auf ImageMagick auf, welches ab Weblication® CMS-Version 9.x über die Systemeinstellungen aktiviert werden kann, wenn dies vom Webserver unterstützt wird. Stellen Sie daher zuvor sicher, daß Sie über die Funktionen von ImageMagick verfügen können.

Wenn Sie den nachfolgenden PHP-Code im Verzeichnisereignis onAfterUpload eines Verzeichnisses (z.B. /baseAssets/img/watermark) setzen, erfolgen zu Bildern beim Hochladen folgende Aktionen:

  1. Dateiname wird in zufälligen Dateinamen (Zeitstempel-Zufallsnummer.Bildendung) umbenannt
  2. In die Bild-Datei wird rechts unten ein Copyright-Hinweis mit dem Text "© Mustermann AG" gesetzt. Die Eigenschaften der Schrift, etc. werden über die Parameter-Angaben für ImageMagick definiert und sind individuell einstellbar.

Beachten Sie bitte die Hinweise am Artikelende!

Beispiel: Auszug aus dem Verzeichnisereignis zu onAfterUpload

/* Dateinamen in Zufallsnamen umwandeln */
$pathSource   $eventData['filePath'];
$fileNameDest time().'-'.rand();
wRepository::renameDocument($pathSource$fileNameDest.'.'.wPathName::getFileExtension($pathSource));
$path $eventData['dirPath']."/".$fileNameDest.".".wPathName::getFileExtension($pathSource);

/* Watermark/CopyrightText über imageMagick setzen: */
//$path = $eventData['filePath'];
$text "© Mustermann AG";

//Schrifteigenschaften
$fontfamily "Bookman-DemiItalic";
$fontsize    "12";

//Farbe Schatten 
$color '#666666';
$strokewidth '1';
$x '11';
$y '10';

//Farbe Schrift
$color_s '#FFFFCC';
$strokewidth_s '1';
$x_s '11';
$y_s '10';

$system '/usr/bin/convert convert "'.$_SERVER['DOCUMENT_ROOT'].$path.'" -font '.$fontfamily.' -pointsize '.$fontsize.' -draw "gravity SouthEast  fill \''.$color.'\'  text 11,12 \''.$text.'\'  fill \''.$color_s.'\'  text 10,11 \''.$text.'\'" "'.$_SERVER['DOCUMENT_ROOT'].$path.'"';
@
exec($system); 

return 
wPathName::removeDocumentRoot($path);

2. Über das Bild-Element mit Standardmitteln

Sie können bereits mit Bordmitteln von Weblication® einen Copyright-Hinweis in zu generierende Bilder setzen. Das aktuelle Weblic® "Bild" unterstützt dies in aktueller Version bereits im Standard.

Die BASE liefert Ihnen hierzu bereits im Standard das Bild-Element als Weblic® schon entsprechend vorbereitet aus. In der design.css sind die Einträge hierzu bereits gesetzt, nur im Standard erstmal deaktiviert (-w-editmaskExtended-copyrighttext:no;-w-addCopyright:no). Diese CSS-Only-Werte setzen Sie jeweils auf yes, damit das Eingabefeld für den Copyright Text ersichtlich ist und ein gesetzter Text auch beim Generieren des Bildes in das Bild geschrieben wird (siehe Quelltextbeispiel unten).

Bild-Element Bearbeitung mit Copyright-Textzoom
Bild-Element Bearbeitung mit Copyright-Text
Generiertes Bild aus Bild-Element mit Copyright-Textzoom
Generiertes Bild aus Bild-Element mit Copyright-Text
 

Beispiel: Auszug aus der design.css des Projektes

/*@wCssFragment{class:elementPicture;variant:0;caption:Standardarstellung;caption-en:Default}*/
.elementPicture_var0                {-w-editmaskExtended-copyrighttext:yes;-w-addCopyright:yes}
Beachten Sie bei dieser Umsetzung, daß das Originalbild nicht manipuliert wird, sondern nur das über das Bild-Element an entsprechender Stelle gesetzte und generierte Bild mit dem Copyright-Text versehen wird!
Beachten Sie zudem die Hinweise am Artikelende!

3. Über das Bild-Element und Projekt-Funktionen

Alternativ zum vorherigen Punkt 2. können Sie das Weblic® Bild-Element auch über Projekt-Funktionen für das Schreiben eines Copyright-Textes ins Bild erweitern. Über die design.css darf bzw. sollte in diesem Fall der Copyright-Text nicht hinzugefügt werden, da ansonsten der Copyright-Text zweimal in das Bild generiert wird.

Die aktuelle BASE wird so ausgeliefert, daß über das Weblic® Bild-Element abgefragt wird, ob es eine Projekt-Funktion "wMyProject::adaptImageAfterCreated" gibt. Sofern diese in der wMyProject.php des Projektes vorhanden ist, wird die Rückgabe des Bildpfades aus dieser Funktion erwartet.

Ebenso wird die aktuelle BASE bereits mit einer wMyProject.php Datei ausgeliefert, die beispielhaft die Funktion "wMyProject::adaptImageAfterCreated" schon gesetzt hat.
Wenn Sie diese nutzen wollen, müssen Sie lediglich die Variable $GDorIM mit dem gewünschten Wert befüllen (z.B. bei ImageMagick: "im") und die Variable $text mit Ihrem Copyright-Text befüllen (siehe Quelltextbeispiel unten). Dann wird ein über Bild-Element generiertes Bild mit den dort hinterlegten Funktionen und Parametern (zu GD bzw. ImageMagick) mit Copyright-Text gesetzt.

Die Eigenschaften der Schrift, etc. werden über die Parameter-Angaben für ImageMagick bzw. GD definiert und sind individuell einstellbar.

Generiertes Bild aus Bild-Element mit Copyright-Text über wMyProject-Funktionzoom
Generiertes Bild aus Bild-Element mit Copyright-Text über wMyProject-Funktion
 

Auszug aus der /IhrGlobalesProjekt/wGlobal/scripts/php/wMyProject.php

//*********************************************************************************/
/**
* @method String adaptImageAfterCreated(String $path)
*
* @description Callback Funktion, um ein Bild nachträglich anzupassen
*
* @param path Pfad des Bildes
*
* @param options Einstellungen bzw. Bilddaten
*
* @return String
*
*/
//*********************************************************************************/

public static function adaptImageAfterCreated($path$options){
  
//print "adaptImageAfterCreated($path);\n";
    
  //######################################################################################################         
  //###                                                                                                ###         
  //###  WICHTIG: $pathAdapted muss angepasst werden, da sonst das Originalbild überschrieben wird!!!  ###            
  //###                                                                                                ###         
  //######################################################################################################         
            
  //$pathAdapted = preg_replace('/\.([^\.]+)$/', '-a.$1', $path);
  //copy($_SERVER['DOCUMENT_ROOT'].$path, $_SERVER['DOCUMENT_ROOT'].$pathAdapted);
  
  //var_dump($options);
  /*
  $pathAdapted = $path;

  return $pathAdapted;
  */

  
$GDorIM "im"// "gd" für Nutzung von GD und "im" für Nutzung von imageMagick
  //$text   = $options['copyrightText']; // Text über Angabe im Bild-Element gesetzt
  
$text "© Mustermann AG"// Direktangabe, z.B.: "(c) Mustermann AG"
  
  
if(preg_match('/^.*Assets\/img\//'$path) && $text != ''){
  
    
/* Manipulation über GD */
    
if($GDorIM == 'gd'){
    
      
//print "is GD";
    
      
$pathAdapted preg_replace('/\.([^\.]+)$/''-a.$1'$path);
      
      
//Erstellen eines IMG - Objektes ausgehend von einem bestehenden
      
$image imagecreatefromjpeg($_SERVER['DOCUMENT_ROOT'].$path);
      
      
//Initialisieren der Variablen:
      
      //Farben
      
$white imagecolorallocatealpha($image25525525543);
      
$grey imagecolorallocate($image128128128);
      
$black imagecolorallocate($image000);
      
      
//Text wird weiter oben ausserhalb der if-Abfrage gesetzt!
      
      //Pfad zu der Font-Datei
      
$font $_SERVER['DOCUMENT_ROOT'].'/weblication/grid5/fonts/default.ttf';
                  
      
//Zeichnen:
      
$x $options['pictureWidth']/2;
      
$y $options['pictureHeight']/2;
                  
      
//Rechteckigen Hintergrund
      
imagefilledrectangle($image$x-10$y-20$x+300$y+10$white);

      
//Schatten (versetzt zu Text)
      
imagettftext($image100$x$y$grey$font$text);
      
      
//Text
      
imagettftext($image100$x-1$y$white$font$text);
      
      
//Erstelle Datei
      //imgpng() erstellt hierbei deutlicheren Text als imagejpeg()
      
imagepng($image$_SERVER['DOCUMENT_ROOT'].$pathAdapted);
      
      
//Löschen des img-Objektes
      
imagedestroy($image);
  
      
$path $pathAdapted;
      
      return 
$path;
          
    }
    
/* Manipulation über imageMagick */
    
else if($GDorIM == 'im'){
    
      
//print "is imageMagick";
  
      
$pathAdapted preg_replace('/\.([^\.]+)$/''-a.$1'$path);
      
copy($_SERVER['DOCUMENT_ROOT'].$path$_SERVER['DOCUMENT_ROOT'].$pathAdapted);
      
      
$pathSource $path;
      
$pathDest   $pathAdapted;
      
      
//Text wird weiter oben ausserhalb der if-Abfrage gesetzt!
      
      //Schrifteigenschaften
      
$fontfamily "Bookman-DemiItalic";
      
$fontsize    "12";
      
      
//Farbe Schatten 
      
$color '#666666';
      
$strokewidth '1';
      
$x '11';
      
$y '10';
      
      
//Farbe Schrift
      
$color_s '#FFFFCC';
      
$strokewidth_s '1';
      
$x_s '11';
      
$y_s '10';
      
      
$system '/usr/bin/convert convert "'.$_SERVER['DOCUMENT_ROOT'].$pathSource.'" -font '.$fontfamily.' -pointsize '.$fontsize.' -draw "gravity SouthEast  fill \''.$color.'\'  text 11,12 \''.$text.'\'  fill \''.$color_s.'\'  text 10,11 \''.$text.'\'" "'.$_SERVER['DOCUMENT_ROOT'].$pathDest.'"';
      @
exec($system); 
      
      return 
wPathName::removeDocumentRoot($pathAdapted);
    
    }
    else{
      return 
$path;
    }
  }
  else{
    return 
$path;
  }

}
Beachten Sie bei dieser Umsetzung, daß das Originalbild nicht manipuliert wird, sondern nur das über das Bild-Element an entsprechender Stelle gesetzte und generierte Bild mit dem Copyright-Text versehen wird!
Beachten Sie zudem die Hinweise am Artikelende!

4. Über Bildergalerien

Bildergalerien können Sie durch manuelle Anpassung des entsprechenden Templates (hier: gallery.wFilelist.php) mit der Möglichkeit eines Copyright-Textes erweitern.

Erweitern Sie hierzu den entsprechendenen wsl:thumbnail Aufruf durch das copyrightText-Attribut und den gewünschten Text (siehe Beispiel unten). Je nach gewählter Galerie-Variante sollten Sie berücksichtigen, daß nicht alle Bilder einer Variante (optimal) mit dem entsprechenden Copyright-Text versehen werden können!

Bildergalerie Variante 0 mit Copyright-Text für Großbildzoom
Bildergalerie Variante 0 mit Copyright-Text für Großbild
 

Auszug aus der gallery.wFilelist.php mit Erweiterung um das copyrightText-Attribut

...
<!-- Bild -->
<wsl:thumbnail class="listEntryImage" copyrightText="© Mustermann AG" src="{@path}" hd="{/wFilelist/wData/data[@name='createHD']/text()}" lazyLoad="{/wFilelist/wData/data[@name='lazyLoad']/text()}" width="{//data[@name = 'pictureWidth']/text()}" height="{//data[@name = 'pictureHeight']/text()}" quality="{php:functionString('wVariables::getValue', 'thumbnails_quality', '/baseGlobal', '')}" mode="{//data[@name = 'pictureMode']/text()}" backgroundColor="{//data[@name = 'pictureBackgroundColor']/text()}" alt="{php:functionString('htmlspecialchars', $listEntryTitle)}" title="{php:functionString('htmlspecialchars', $listEntryTitle)}"/>
...
Wenn Bilder im Original ausgegeben werden, greift dies nicht (z.B. Großbilder bei var2-Galerie (Fancybox)).
Beachten Sie zudem die Hinweise am Artikelende!

Hinweise und weitere Informationen

Die zuvor aufgelisteten Möglichkeiten zum Setzen eines Copyright-Textes in Bilder beziehen sich auf die Werkzeuge von Weblication®! Sofern Bilder unabhängig von Weblication® auf den Server gelangen (z.B. über FTP oder andere Skripte), müssen Sie selber für entsprechende Werkzeuge sorgen, die den gewünschten Copyright-Vermerk setzen!

Die Funktionen und Möglichkeiten der Bildmanipulation über das GD-Modul bzw. ImageMagick unterliegen nicht dem kostenlosen CMS-Suport. Hierfür können wir keine Gewährleistung und Support geben!

Bei Bild-Manipulationen über ausgelagerte Funktionen (z.B. Verzeichnisereignis bzw. wMyProjekt-Funktionen) können Sie individuellste Anpassungen zu den generierten Bildern vornehmen. So lassen sich über ImageMagick z.B. auch Polaroid-Darstellungen von Bildern realisieren und vieles mehr!

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG