Bildgröße automatisch anpassen

Oft stehen Bilder nur in einer festen, hohen Auflösung bereit. Für die Website wird das Bild aber in verschiedenen Auflösungen, teilweise wesentlich kleineren Auflösungen benötigt.

Stellen Sie sich vor, Sie haben mit der Digitalkamera ein Bild von einem Mitarbeiter aufgenommen: "smeyer.jpg". Die Auflösung von 2272x1704 in 180dpi ist für Ihre Website "geringfügig" zu groß. Weil das Bild aber an verschiedenen Stellen in unterschiedlichen Auflösungen erscheinen soll, wäre es auch umständlich dieses Bild bspw. mit dem ImageEditor in die jeweils notwendige Auflösung zu transformieren. Ideal wäre, wenn Sie über die Referenzierung des Bildes gleich angeben könnten, in welcher Auflösung das Bild erscheinen soll. Für eine gewünschte Auflösung von 100x250 Pixel könnte dies wie folgt aussehen:

Die zu realisierende Anforderung ist nun, aus dem Bild "smeyer.jpg" ein Bild "smeyer_res_100x250px.jpg" zu erzeugen und dieses in die gewünschte Auflösung zu transformieren.

Anwendungsfall Pressebereich

Ein typischer Anwendungsfall is der Pressebereich vieler Websites: Hier wird ein Thumbnail eines Pressefotos angezeigt und das Bild lässt sich in einem Popup in der webfähigen Auflösung anzeigen. Zusätzlich ist noch der Download in zwei größeren, druckfähigen Auflösungen vorgesehen. Ein mit der Digitalkamera aufgenommenes Pressefoto soll nun i.d.R. einfach nur online gestellt werden und nicht erst aufwendig in die notwendigen webfähigen Auflösungen transformiert werden. D.h. der Redakteur fügt das Digitalkamerbild in der Orginalauflösung in VIO.Matrix ein, die Darstellung der benötigten kleineren Bilder übernimmt der Webserver ohne Zutun des Redakteurs.

Das Verfahren

Grundsätzlich ist davon auszugehen, dass das Bild "smeyer_res_100x250px.jpg" (Zielbild) noch nicht auf dem Webserver vorliegt. Es muss also aus dem Bild "smeyer.jpg" (Quellbild) das Zielbild erzeugt werden. Diese Transformation des Quell- zum Zielbild nimmt bspw. das ImageMagick-Paket vor. Da der Server nicht unnötig mit Bildtransformationen belastet werden sollte, soll das Bild nur dann transformiert werden, wenn es nicht bereits in der geforderten Auflösung vorliegt.

Daraus ergibt sich folgende grundlegende Verfahrensweise:

eine .htaccess-Rule prüft, ob ein angefordertes Zielbild bereits exisitiert
wenn das Zielbild nicht exisitiert, wird aus dem Quellbild das Zielbild erzeugt (bspw. mit ImageMagick)
das Zielbild wird unter dem Zielbild-Dateinamen gespeichert und ausgeliefert

Sieht einfach aus...

Eigentlich kein Problem, wenn die im Beispiel genannte Bildtransformation nicht gleichzeitig mit einer Änderung des Seitenverhältnisses verbunden wäre. Das Quellbild besitzt ein Seitenverhältnis von 4:3, das gewünschte Zielbild ein Seitenverhältnis von 2:5. Um eine sich daraus ergebende Bildverzerrung zu verhindern (das Zielbild würde in die Länge gezogen), müssen Ränder abgeschnitten oder künstlich angefügt werden. In der Praxis ist davon auszugehen, dass eher künstliche Ränder angefügt werden, da ansonsten mitunter wichtige Bilddetails in der notwendiger Weise durchgeführten Beschneidung verloren gehen könnten. Um diese künstlichen Ränder zu erzeugen, wird ein kleiner Trick genutzt: Zuerst wird aus einer Vorlage (bspw. ein weißer Pixel) ein Hintergrundbild in der Größe des Zielbildes erzeugt. Danach wird aus dem Quellbild ein temporäres Zielbild erzeugt - und zwar im gleichen Seitenverhältnis. Dieses temporäre Zielbild wird mittig (oder anders) auf das vorher erzeugte Hintergrundbild platziert. Das Ergebnis: Ein perfekt verkleinertes oder ggf. auch vergrößertes Zielbild - trotz verschiedener Seitenverhältnisse!

Implementierung der Bildtransformation

Entwicklung der .htaccess-Rule

Die zu entwickelnde .htaccess-Rule besitzt zwei Aufgaben:

Prüfung, ob das gewünschte Zielbild bereits vorhanden ist und
wenn nicht, eine Weiterleitung auf ein entsprechendes Transformationsskript zu schaffen.

Erzeugen Sie im Bildverzeichnis (bspw. /viomatrix/imgs) eine Datei mit dem Namen ".htaccess" mit folgenden Inhalt:

Die angegebene RewriteRule greift, wenn eine vom Webbrowser angeforderte Datei nicht gefunden werden kann und ruft dann das Perl-Skript "getimg.pl" mit folgenden Parametern auf:

path_web - Pfadname unter welchem Bilder im Web referenziert werden. Diese Angabe sollte mit dem Inhalt des VIO.Matrix Systemparameters "mediapfad" übereinstimmen.
path_source - Pfadname, wo das notwendige Quellbild zu finden ist. Hier muss der absolute Pfad angegeben werden.
path_destination - Pfadname, wo das Zielbild abgespeichert werden soll. Hier muss der absolute Pfad angegeben werden, welcher unter "path_web" referenziert wird.
filename - Dateiname (ohne Dateiendung) des Quellbildes
width - Breite des Zielbildes in Pixel
height - Höhe des Zielbildes in Pixel
ext - Dateiendung des Quell- und Zielbildes

Skript zu Bildtransformation

Das von der .htaccess-Rule referenzierte Skript besitzt die Aufgabe, das angegebene Quellbild in das gewünschte Zielbild zu transformieren. Das Skript "getimg.pl" sollte im cgi-bin-Verzeichnis mit folgenden Inhalt erzeugt werden:

#!/usr/bin/perl -w
use strict;
use CGI::Carp qw(fatalsToBrowser);my $eingabe;
my @paare;
my $paar;
my $schluessel;
my $wert;
my %FORM;
my @array;# Übertragungsmethode GET
if($ENV{'REQUEST_METHOD'} eq 'GET')
{
 $eingabe = $ENV{'QUERY_STRING'};
}
# Übertragungsmethode POST
else
{
 read(STDIN, $eingabe, $ENV{'CONTENT_LENGTH'});
}# Wertepaare trennen
@paare = split(/&/, $eingabe);
foreach $paar (@paare)
{
 ($schluessel, $wert) = split(/=/, $paar);
 # Sonderzeichen ersetzen
 $wert =≈ tr/+ // ;
 $wert =≈ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
 # Schlüssel mit Wert überschreiben
 $FORM{$schluessel} = $wert;
}
# Bildkonvertierung durchführen
my $cmd = "";
if ( $FORM{'width'} > 0 )
{
 if ( $FORM{'height'} > 0 )
 {
 my $cmd_width = "./getimgwidth $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'}";
 my $cmd_height = "./getimgheight $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'}"; my $w = qx( $cmd_width );
 my $h = qx( $cmd_height ); chomp($w);
 chomp($h); if( $FORM{'width'} > $FORM{'height'} )
 {
 $cmd = "convert -resize '$FORM{'width'}x$FORM{'height'}!' $FORM{'path_destination'}/hintergrund_bilder.gif $FORM{'path_destination'}/hintergrund_bilder_$FORM{'width'}x$FORM{'height'}.gif && convert -resize 'x$FORM{'height'}' $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'} $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}_pre.$FORM{'ext'} && composite -gravity center $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}_pre.$FORM{'ext'} $FORM{'path_destination'}/hintergrund_bilder_$FORM{'width'}x$FORM{'height'}.gif $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}.$FORM{'ext'}";
 }
 else
 {
 $cmd = "convert -resize '$FORM{'width'}x$FORM{'height'}!' $FORM{'path_destination'}/hintergrund_bilder.gif $FORM{'path_destination'}/hintergrund_bilder_$FORM{'width'}x$FORM{'height'}.gif && convert -resize '$FORM{'width'}x$FORM{'height'}' $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'} $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}_pre.$FORM{'ext'} && composite -gravity center $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}_pre.$FORM{'ext'} $FORM{'path_destination'}/hintergrund_bilder_$FORM{'width'}x$FORM{'height'}.gif $FORM{'path_destination'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}.$FORM{'ext'}";
 }
 system( $cmd ); # HTML-Ausgabe vorbereiten
 print "Location: $FORM{'path_web'}/$FORM{'filename'}_res_$FORM{'width'}x$FORM{'height'}.$FORM{'ext'}\n\n";
 }
}if ( $FORM{'width'} == 0 && $FORM{'height'} > 0 )
{
 #nur auf Hoehe anpassen
 $cmd = "convert -resize 'x$FORM{'height'}' $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'} $FORM{'path_destination'}/$FORM{'filename'}_res_h$FORM{'height'}.$FORM{'ext'}"; system( $cmd ); # HTML-Ausgabe vorbereiten
 print "Location: $FORM{'path_web'}/$FORM{'filename'}_res_h$FORM{'height'}.$FORM{'ext'}\n\n";
}if ( $FORM{'width'} > 0 && $FORM{'height'} == 0 )
{
 #nur auf Breite anpassen
 $cmd = "convert -resize '$FORM{'width'}x' $FORM{'path_source'}/$FORM{'filename'}.$FORM{'ext'} $FORM{'path_destination'}/$FORM{'filename'}_res_w$FORM{'width'}.$FORM{'ext'}"; system( $cmd ); # HTML-Ausgabe vorbereiten
 print "Location: $FORM{'path_web'}/$FORM{'filename'}_res_w$FORM{'width'}.$FORM{'ext'}\n\n";
}

Das Skript nimmt vorerst eine Bereinigung der Übergabeparameter vor, um mögliche Angriffe zu verhindern. Danach wird die Breite und Höhe des Quellbildes ermittelt - hierzu müssen die im ImageMagick enthaltenen Befehle "getimgwidth" und "getimgheigth" vorhanden sein. Nun wird unterschieden, ob Breite und Höhe des Zielbildes vorgeben sind oder nur einer der beiden Werte. Im letzen Fall muss auch keine Berücksichtigung verschiedener Seitenverhältnisse erfolgen, da bspw. bei vorgegebener Breite immer die im Seitenverhältnis korrekte Höhe kalkuliert werden kann. Im ersten Fall - Breite und Höhe des Zielbildes sind vorgegeben - wird mit Hilfe des ImageMagick-Befehls "convert" vorerst, ein Standard-Hintergrundbild (hintergrund_bilder.gif) auf die gewünschte Zielgröße gebracht und danach das Quellbild verkleinert und auf das erzeugte Hintergrundbild gerendert. Im Anschluß wird das jeweils erzeugte und gespeicherte Zielbild mittels Content negotiation (Location im HTTP-Header) ausgegeben.