Bilder automatisch auf dem Webserver erzeugen nur mit Imagemagick und PHP Part 3

25. Januar 2016 - Foto

Link zu Teil 1

Link zu Teil 2

Jetzt wollen wir uns mal an die Vespa machen, die übrigens in Gallipoli/Apulien in der Altstadt herumstand.

Wir müssen dazu drei Dateien vorbereiten.
Die erste haben wir schon im Teil 2 erzeugt und sieht so ähnlich  (verkleinert) aus:

sphere_mask

 
Die zweite erzeugen wir mit
 convert -size 100x100 xc:  -channel R \
 -fx 'yy=(j+.5)/h-.5; (i/w-.5)/(sqrt(1-4*yy^2))+.5' \
 -separate  +channel     sphere_lut.png

Daraus wird unter PHP

<?php
$lut=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR."sphere_lut.png";
$cmdP1= "convert -size 400x400 xc:  -channel R ".
"-fx \"yy=(j+.5)/h-.5; (i/w-.5)/(sqrt(1-4*yy^2))+.5\" ".
"-separate  +channel    $lut ";
?>

Das sieht etwas verwirrend aus. ImageMagick hat außer den eingebauten Funtionen wie z.B. -size oder -separate auch noch die Möglichkeit, die Transformation Pixel für Pixel selbst zu machen mit dem -fx special effects image operator. Was da genau passiert, kann man mit wenigen Worten hier nicht erklären, aber es ist hier gut dokumentiert

Am besten, man macht das so wie gewöhnlich: man findet einen Effekt, probiert ihn aus und wenn man etwas ändern möchte, muß man sich einlesen.

Rein technisch ist sphere_lut.php eine lookup table, die bei der Erzeugung des eigentlichen Bildes Pixel für Pixel ausgelesen wird. Dabei werden die Grauwerte jedes Pixels (skaliert von 0.0 bis 1.0) dazu verwendet, um die Bildtranformation zu steuern.

Im vorliegenden Fall wird ein quadratisches Bild auf einen Kreis abgebildet

sphere_lut.png sieht so aus:

sphere_lut
Im Prinzip ist es ein Kreis, der einen horizontalen Gradienten von schwarz nach weiß besitzt. Die weißen und schwarzen Ecken kann man sich wegdenken, weil sie später ausgeblendet werden.

 

Die dritte Datei wird aus der ersten Datei abgeleitet. Sie soll unserer Vespa einen 3D- Effekt geben.

convert sphere_mask.png \
 \( +clone -blur 0x20 -shade 110x21.7 -contrast-stretch 0% \
 +sigmoidal-contrast 6x50% -fill grey50 -colorize 10%  \) \
 -composite sphere_overlay.png

Daraus wird unter PHP

<?php
$overlay=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'sphere_overlay.png';
$cmdP3= "convert $mask ( +clone -blur 0x20 -shade 110x21.7 -contrast-stretch 0% ".
" +sigmoidal-contrast 6x50% -fill grey50 -colorize 10% ) ".
" -composite $overlay ";
?>

Achtung: die escapten Klammern \( und \) werden einfach zu ( und ) !!!

Hier wird unser weißer Kreis unscharf gemacht (-blur…), aus einer Richtung und einer Höhe belichtet (-shade …) und dann das Ergebnis verbessert.
Bei Gimp heißt dieser Effekt Bumpmap.

Das Ergebnis sollte so aussehen:

sphere_overlay

Jetzt können wir die Vespa erzeugen:

convert vespa_orig.png -resize 100x100   sphere_lut.png   -fx 'p{ v*w, j }' \
sphere_overlay.png   -compose HardLight  -composite \
sphere_mask.png -alpha off -compose CopyOpacity -composite \
sphere_vespa.png
<?php
$input=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'vespa.jpg';
$out=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'vespa_button.jpg';
$cmd=" convert $input -resize 400x400 ".
" $lut    -fx \"p{ v*w, j }\"   ".
" $overlay -compose HardLight  -composite ".
" $mask -alpha off -compose CopyOpacity ".
" -composite $out ";
?>

Hier ist das Originalbild (verkleinert)

vespa200x200

Und hier unser Button

vespa_200x200

 

 

 

 

 

 

Viel Spaß beim Bildermachen.