Im letzten Beitxrag habe ich erst einmal gezeigt, wie man mit Formidable Pro mittels des Hooks 'frm_after_create_entry' Daten weiter bearbeiten kann. Nun sollen die Daten mittels Imagemagick weierbearbeitet werden, indem dem Bild eine Perspektive hinzugefügt wird. Bevor wir Imagemagick im Aufruf näher betrachten, gehen wir zunächst darauf ein, was eigentlich bei der Transformation eines Bildes in eine Perspektivische geschieht. Mathematisch handelt es sich um eine Drehung und Streckung der einzelnen Bildpunkte.

Koordinatentransofmation bei der Erstellung eines persepkivischen Bildes

Dabei werden die Bildpunkte durch eine Koordinatentransformation der Ursprungspunkte gefunden:

Die 8 Koeffizienten werden durch 8 Punkte festgelegt.

Imagemagick und Befehlssyntax

Imagemagick verändert Bilder mit dem Befehl convert. Will man eine Perspektive erzeugen, wird auf der Befehlszeile der Zusatzparameter –distort Perspektive verwendet. Distort beinhaltet eine ganze Klasse von Transformationen, von denen eben eine die Perspektive ist. Wie oben skiziert, brauch man zur Festlegung der Transformation 8 Bildpunkte zur Ermittlung der Transformationskoeffizienten. Diese werden in Anführungszeichen gesetzt und die Transformationskoeffizienten von Imagemagick berechnet:

'           '

Zu beachten dabei ist, dass Ursprungspunkt und Zielpunkt durch ein Leerzeichen voneinander getrennt sind und die Punktpaare durch drei.

Virtuelle Pixel

Durch die oben beschriebene Operation entsteht ein Bildbereich aus dem Ursprungsbild, in dem die Bildpixel nun undefiniert sind.  Es ist also nötig, Imagemagick zu sagen, was mit diesem Bereich geschehen soll. Da wir gerne hätten, dass das Bild sich dem Hintergrund anpasst müssen wir zunächst als Ausgabeformat der Bilddatei eine Bilddefinition wählen, die auch über einen -Kanal verfügt. Also wähle ich als Zielformat png. Zudem möchte ich den ausgeschnittenen Bereich transparent haben, damit sich das Bild dem Dokumentenhintergrund anpasst, wenn es in ein Dokument geladen wird. Das geschieht mit dem Schalter -virtual-Pixel transparent.

Um Imagemagick innerhalb von WordPress in php auszuüführen benötige ich also einen Befehl derart:

schell_exec( convert Ursprungsdatei -virtual-Pixel -distort Persective 'P1 B1   P2 B2   P3 B3   P4 B4' Zieldatei.png);

Anpassung des Skriptes Perspektive

Im Skript Datenverarbeitung mit Formidable Pro und Imagemagick zur Bildbearbeitung in WordPress erhalten wir eine Bilddatei mit Formidable Pro. Dabei verwenden wir für die Perspektive ein definiertes Zielbild. Um sicherzustellen, dass das neue Zielbild, innerhalb der Größe des Ursprungsbildes liegt, lesen wir zunächst die Größe des Ursprungsbildes aus und berechnen aus der vorgegebenen Maske die neuen Bildpunkte . Ursprungsbildpunkte und Zielbildpunkte legen wir in der Variablen $stretch fest.

Es ergibt sich der Gesamtcode zu:

//Anmeldung des Formidable Hooks mit der Funktion wd_man_im bei wordpress
add_action('frm_after_create_entry', 'wd_man_im', 10, 2);
function wd_man_im($form_id,$entry_id){
     // Formularnummer und Key des Eintrages ermitteln
     $form_id=$_POST['form_id'];
     $Id_Data = $_POST['item_key'];
     //Wenn Formular xx (hier 27) abgesendet wurde, dann führe folgende Operationen aus.
  if ($form_id = 27){
     //Ersetze Mein Wordpress Home Verzeichnis durch das Verzeichnis der Wordpress Installation
     $parse_uri = explode( 'Mein Wordpress Home Verzeichnis', $_SERVER['SCRIPT_FILENAME'] );
     $Pfad= $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Uplod Verzeichnis Formular/";
     // Verwende die globalen Funktionen von Wordpress
     global $wpdb;
     //Ermittlung des Bildnamens
     $current_value = $_POST['item_meta'][216];
     $Dat_url= wp_get_attachment_url($current_value);
     $KompDatei=$Pfad.basename($Dat_url);
     //Definition der Zieldatei mit zu Hilfename des Keys
     $NewImage = $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Datei Zielverzeichnis/".$_POST['item_key']."_converted.png";
  //Auswahl der Option Perspektive
  if ($_POST['item_meta'][219] == "Perspektive"){
  //Ermittlung der Bildgröße
   $size = getimagesize( $KompDatei);
  //Berechnung der Zielbildpunkte aus der Maske
   $hoehe_neu_y_max = round(0.875*$size[1]);
   $hoehe_neu_y_min = round(0.125*$size[1]);
   //Ursprungsbildpunkte und berechnete Zielpunkte
   $stretch = '"0,0 0,0   '.$size[0].',0 '.$size[0].','.$hoehe_neu_y_min.'   '.$size[0].','.$size[1].' '.$size[0].','.$hoehe_neu_y_max.'   0,'.$size[1].' 0,'.$size[1].' "';
   //Zusammenbau des Imagemagick Befehls mit der Option virtuelle Punkte transparent darzustellen.
   $cmd = 'convert '.$KompDatei.'  -virtual-pixel transparent -distort Perspective '.$stretch.' '.$Newimage;
   //Ausführung des Shell Skripts
   shell_exec($cmd);
}

Die Anwendung dieses Tools finden Sie auf bewerbungstools.de/

Bewerbungsfoto: Peppen Sie Ihr Bild auf

Ursprünglich habe ich mir das kostenpflichtige Plugin Formidable Pro erworben, um Benutzern auf der Frontend Seite von WordPress die Möglichkeit zu bieten, Beiträge zu veröffentlichen. Dieses Vorhaben habe ich schon vor längerer Zeit verworfen. Da ich Internetseiten entwickele, mit denen der Seitenbesucher sich verschiedener Dienste bedienen kann, möchte ich hier eine grundsätzliche Verwendungsmöglichkeit von Formidable Pro skizzieren. Das Beispiel, dass ich aufzeigen werde, verwendet neben dem Plugin Formidable Pro, das Bildprogramm imagemagick auf Linux, mit dem es möglich ist, Bilder zu bearbeiten. Die Funktionsweise des hier vorgestellten Skripts kann man auf https://bewerbugnstools.de sehen.

Ziel dieses Skriptes ist es, dem Benutzer der Seite die Möglichkeit zu geben Bewerbungsfotos ein wenig aufzuwerten und Online Manipulationen des Bildes zu ermöglichen wie es zum Beispiel Word bietet. Es empfiehlt sich das Plugin Code Snippets zu installieren. Mit diesem Plugin können alle Code Schnippsel, die normalerweise in die function.php des Themes geschrieben werden themeunabhängig programmiert werden. Das hat den Vorteil, dass die Schnippsel in einer Datenbank liegen und bei der Aktualisierung des WordPress Theme erhalten bleiben.

Anlegen und konfigurieren des Formulars

Mit dem Formular sollen Bilddateien hochgeladen werden und durch eine Auswahl verschiedener Optionen unterschiedliche Manipulationen angeboten werden. Dafür kann man die Feldart Radio Buttons nutzen. Es ist also ein Formularfeld zum Hochladen von Dateien auszuwählen. Damit nur Bilddateien zugelassen werden, kann man die Bilddateien im Backup Bereich von WordPress auswählen. Imagemagick kann so gut wie alle Bilddateien bearbeiten, deshalb kann man hier auch Bilddateien wie Bitmap zulassen. Es ist sinnvoll die Dateigröße zu begrenzen.

Als Bildbearbeitungsoptionen sollen Polaroid, Panorama, Vignette, Schatten und Beschriftung gewählt werden. Schön ist es, wenn die gewählte Option auch durch ein entsprechendes Bild untermalt wird. Das geht ganz einfach, indem man als Auswahlmöglichkeit

 <img src="Bild Url" width="75" /> Option

als Bezeichnung für die Option eingibt.

Macht man dies, muss man allerdings darauf achten, dass man die Option Benutze separate Werte bei den Einstellungen des Radio Buttons Feld im Formidable Pro Backend Bereich verwendet, damit bei der Abfrage im Skript auch der entsprechende gewünschte Optionswert abgefragt wird und nicht der gesamte html-Code. Nützlich ist noch ein Captcha Feld.

Formidable Pro Hooks zur Datenmanipulation

Formidable bietet eine ganze Reihe von Hooks zu Verarbeitung und Anpassung der Formulardaten an. Für unsere Zwecke verwenden wir den Hook

'frm_after_create_entry'

mit dem Daten nach der Erstellung des Datensatzes weiter bearbeitet werden können. Wie üblich wird bei WordPress eine spezielle Funktion durch den Hook durch

add_action

angemeldet. Wir definieren hier die Funktion

'wd_man_im'

. Beim Versenden des Formulars werden die Einträge des Formulars versendet. Die Formularnummer erhallt man dabei durch

$_POST['form_id']

. Entsprechende Felder durch

$_POST['item_key'][Feldnummer]

. Dabei ist Feldnummer die vom Formular erzeugte Feld id von Formidable Pro. nach der Manipulation des Bildes soll die neue Datei zum Download freigegeben werden. Dazu verwenden wir den Datensatzschlüssel, um eine eindeutige Datei zu erzeigen. Den Datensatzschlüssel erhalten wir durch

$_POST['item_key'].

Der Vorteil bei der Verwendung des Keys gegenüber der ID liegt darin, dass der Key schon vor der Speicherung der Daten in der Daenbank existiert, während die ID erst beim Anlegen der Datenbank festseht.

Zunächst filtert das Skript heraus, welches Formular aufgerufen worden ist. Damit die Funktion nur für das vorgesehene Formular ausgeführt wird, definieren wir die Variablen

$form_id

und

$Id_Data

, die wir durch den entsprechenden POST Aufruf erhalten. Dann fragen wir diese entsprechende Variable durch eine if-Schleife ab. In unserem Beispiel soll wird die Funktion nur ausgeführt, wenn das Formular mit der ID 27 ausgefüllt worden ist.

Bei der Verwendung von Code Snippets ist zunächst ungewiss, in welchem Verzeichnis das Skript ausgeführt wird. Da wir für manche Operationen den vollen Pfad unserer Installation benötigen und der nicht immer bekannt ist, bedienen wir uns

$_SERVER['SCRIPT_FILENAME']

Methode und zerlegen den Pfadnamen mittels

explore()

, Jetzt können wir serverunabhängig spezielle Namen und Verzeichnisse definieren. Üblicherweise liegen die von Formidable Pro hochgeladenen Bilder in einem Verzeichnis:

/Meine Wordpress Installation/wp-content/uploads/formidable/Formular Nummer/

Bei importieren Formularen kann das leider auch abweichen und dann sucht man verzweifelt den Fehler

Formidable Pro speichert die hochgeladene Datei wie eine übliche Datei im Mediencenter von WordPress ab. Dementsprechend erhält man mit dem Befehl

$_POST['item_meta'][Feldnummer Upload Feld]

die entsprechende Medien ID aus WordPress. Mit dem Befehl

wp_get_attachement_url(ID)

kann man den Bildlink herausfiltern. Da wir aber den absoluten Dateinamen benötigen, müssen wir uns zunächst den Dateinamen mit

basename()

und der Konstruktion des Pfades erzeugen. Bevor die eigentliche Bildbearbeitung beginnt, definieren wir noch einen Dateinamen, für das neue Bild, den wir zum Download und zur Ausgabe der Zieldatei von Imagemagick brauchen. Durch die Verwendung des Datensatzkeys ist das Bild auch eindeutig.

Das nachfolgende Skript zeigt die Auswertung des hochgeladenen Bildes und mit der definierten Funktion.

Bei der Verwendung von Code-Snippets fallen die php Tags weg.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//Anmeldung des Formidable Hooks mit der Funktion wd_man_im bei wordpress
add_action('frm_after_create_entry', 'wd_man_im', 10, 2);
function wd_man_im($form_id,$entry_id){
     // Formularnummer und Key des Eintrages ermitteln
     $form_id=$_POST['form_id'];
     $Id_Data = $_POST['item_key'];
     //Wenn Formular xx (hier 27) abgesendet wurde, dann führe folgende Operationen aus.
  if ($form_id = 27){
     //Ersetze Mein Wordpress Home Verzeichnis durch das Verzeichnis der Wordpress Installation
     $parse_uri = explode( 'Mein Wordpress Home Verzeichnis', $_SERVER['SCRIPT_FILENAME'] );
     $Pfad= $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Uplod Verzeichnis Formular/";
     // Verwende die globalen Funktionen von Wordpress
     global $wpdb;
     //Ermittlung des Bildnamens
     $current_value = $_POST['item_meta'][216];
     $Dat_url= wp_get_attachment_url($current_value);
     $KompDatei=$Pfad.basename($Dat_url);
     //Definition der Zieldatei mit zu Hilfename des Keys
     $NewImage = $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Datei Zielverzeichnis/".$_POST['item_key']."_converted.png";
 
  if ($_POST['item_meta'][219] == "Perspektive"){
   $size = getimagesize( $KompDatei);
   $hoehe_neu_y_max = round(0.875*$size[1]);
   $hoehe_neu_y_min = round(0.125*$size[1]);
 
   $stretch = '"0,0 0,0   '.$size[0].',0 '.$size[0].','.$hoehe_neu_y_min.'   '.$size[0].','.$size[1].' '.$size[0].','.$hoehe_neu_y_max.'   0,'.$size[1].' 0,'.$size[1].' "';
 
   $cmd = 'convert '.$KompDatei.'  -virtual-pixel transparent -distort Perspective '.$stretch.' '.$Newimage;
 
   shell_exec($cmd);
}
 
Was bei der Auswertung des Bildbearbeitungsteiles passiert, kann man im Beitrag <a href="http://waler-dietz.de/bildbearbeitung-mit-imagemagick-bild-mit-perspektive/" target="_blank" rel="noopener">Bildbearbeitung mit Imagemagick: Bild mit Perspektive</a> lesen und nachvollziehen.