Monat: Januar 2016

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:

 
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:

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:

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)

Und hier unser Button

Viel Spaß beim Bildermachen.

Link zu Teil 1

Link zu Teil 3

Die Beispiele für den Einsatz von ImageMagick im Internet sind fast alle für die UNIX Bash-Shell geschrieben.
Bash wird man bei seiner Feld-Wald-und-Wiesen Domain kaum vorfinden. Deshalb müssen wir die Beispiele etwas abändern.
Das folgende Bash Script stammt von Anthony Thyssens Seite http://www.imagemagick.org/Usage/mapping/#spherical und erzeugt ein Schwarz-Weiß Bild (weißer Kreis in einem schwarzen Quadrat), das wir später für unser Beispiel nutzen werden.

convert -size 100x100 xc:black -fill white \
-draw 'circle 49.5,49.5 49.5,0'    sphere_mask.png

wird zu

$base_dir=__DIR__;
$absoluter_Pfad_mit_DIRECTORY_SEPARATOR=$base_dir.DIRECTORY_SEPARATOR;
$mask=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR."sphere_mask.png";
$cmdP2= " convert -size 400x400 xc:black -fill white ".
" -draw \"circle 199.5,199.5 199.5,0\" $mask ";

Ich habe hier den freistehenden Backslash (zeigt Bash an, dass die nächste Zeile auch noch zum Script gehört) entfernt und die Hochkommas durch \“ ersetzt. Außerdem sollten alle Dateien einen absoluten Pfadnamen erhalten.
Als letztes habe ich noch die Dateigröße auf 400×400 Pixel vergrößert und den zu zeichnenden Kreis entsprechend angepasst.

Mein kleines PHP Programm sieht nun so aus:

<?php
$base_dir=__DIR__;
$absoluter_Pfad_mit_DIRECTORY_SEPARATOR=$base_dir.DIRECTORY_SEPARATOR;
$mask=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR."sphere_mask.png";
$cmdP2= "convert -size 400x400 xc:black -fill white ".
"-draw \"circle 199.5,199.5 199.5,0\" $mask ";
unset($out);
exec($cmdP2,$out,$err);
echo "<br />out ".print_r($out)."<br />";
echo "err= $err";
?>

Da wir hier das Ergebnis in die Datei sphere_mask.png speichern und nicht wie im ersten Beispiel an den Browser schicken, können wir exec() anstelle von system() verwenden. Der Unterschied wird hier erklärt.

Link zum Teil 2

Link zum Teil 3

In diesem Beitrag wird gezeigt, wie man ohne die PHP Library Imagick komplexe automatische Bilder auf dem Webserver erzeugen kann.
Dazu gibt es folgende Kapitel:
– einfacher Test, mit dem man erkennen kann, ob Imagemagick auf seinem Webserver installiert ist und zusammen mit PHP funktioniert
– Wie findet man Imagemagick Beispiele und wie muß man sie verändern, damit sie unter PHP laufen
– eine komplexe Beispielanwendung: quadratische Bilder werden zu runden Badges mit 3D-Effekt

English summary:
This post is intended for those who want to let their webserver create complex images with just Imagemagick and PHP.
It covers the topics:
– how you can easily find out that Imagemagick is installed on your webserver und cooperates with PHP
– modify existing examples from the internet so that they will run in PHP exec
– and we will build an example that converts rectangular images into circular „badges“ with 3D effects.

Kann ich Imagemagick auf meinem Webserver nutzen?

Hierzu ein einfaches Testprogramm:

<?php
$cmd= "convert rose:    GIF:-";
header("Content-type: image/gif");
system($cmd,$array);
?>

Man speichert dieses Programm als index.php und lädt es in ein Unterverzeichnis seiner Domain http://meinedomain.de, z.B. als „im_test“.
Dann ruft man das Programm auf : http://meinedomain.de/im_test und sollte anschließend in seinem Browser dieses kleine Bild sehen:

„rose“ ist ein eingebautes Testbildchen von Imagemagick. „convert rose:    GIF:-“ ruft Imagemagicks  convert Funktion auf, die es nach gif
konvertiert und zum Browser schickt.

Sieht man das Bild nicht, sollte man sich mit seinem Provider unterhalten…
Getestet habe ich das Beispiel bei strato und 1und1.