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.