Bilder maskieren in Drupal

Wenn Bilder in einer unregelmäßigen Form dargestellt werden sollen, wie z. B. als Puzzleteil oder als Briefmarke mit gezacktem Rand, dann kann man mit Hilfe der Drupal-Bild-Stile eine Maskierung vornehmen, die Bilder können damit eine beliebige Form annehmen.

Dafür werden nur ein Bild für die Maske und die Module »ImageCache Actions« (D7) bzw. »Image Effects« (D8) benötigt. Als Bild-Toolkit muß GD verwendet werden.

Das folgende Bild wird in diesem Beispiel als Maske verwendet und erzeugt später den Umriss für das eigentliche Bild. Die Maske muß als PNG-Bild mit Transparenzen um den zu maskierenden Bereich vorliegen. Der Bereich mit der Maske muss weiß sein. Hier wird die Maske mit einem grauen Hintergrund dargestellt.

Die Qualität steigt mit der Bildgröße der Maske, deshalb empfiehlt es sich die Maske in der doppelten Größe der geplanten Ausgabe anzulegen. Der Rechenaufwand für dieses Bild ist nicht unerheblich, deshalb sollte dieser Effekt möglichst sparsam eingesetzt werden.

Für die Maskierung wird ein neuer Bild-Stil mit nur wenigen Schritten angelegt.

  1. Das Bild-Format wird, wenn möglich, in ein JPG konvertiert, denn mit den kleineren Dateien ist die Umwandlung etwas schneller 
  2. Das zu maskierende Bild muss in etwa dieselble Größe wie die Maske aufweisen, es darf auf jeden Fall nicht kleiner Maske sein. Deshalb wird das Bild zunächst skaliert und zugeschnitten. Dafür eignet sich der Effekt »Scale and Smart Crop«.
  3. Danach wird die Maskierung durchgeführt mit dem Effekt »Image mask«. In diesem Effekt wird der Pfad zu der Datei mit der Maske angegeben.
  4. Das Bild wird wieder mit »Scale and Smart Crop« auf die gewünschte Ausgabegröße gebracht.

Der komplette Bild-Stil in Drupal:

Bilder: pixabay