Das Erzeugen von Vorschaubildern, sogenannten Thumbnails, wird nach wie vor häufig gebraucht und eigentlich sollte es auch inzwischen jeder wissen wie es funktioniert, aber dennoch wird vereinzelt noch danach gefragt.
Zunächst gibt es verschiedene Arten Vorschaubilder zu erzeugen. Die sicherlich primitivste ist das gegebene Bild auf die gewünschte Größe zu kopieren, denn die meisten Bilder sind original nicht quadratisch und würden dann verzerrt werden. Daher müssen wir die neuen Werte vorher berechnen, um gute Ergebnisse zu bekommen.
Gehen wir nun einfach mal davon aus, dass unsere Vorschaubilder eine maximale Seitenlänge haben und quadratisch sein sollen. Jetzt können wir entweder das Bild komplett kopieren und den Rest ggf. mit einer beliebigen Farbe auffüllen, oder wir kopieren einen Ausschnitt und haben dann ein vollflächiges Vorschaubild.
Für die proportionale Anpassung an unsere maximale Seitenlänge müssen wir zuerst das Bildformat, bzw. die Ausrichtung des Originalbildes ermitteln.
if (srcHeight < srcWidth) {
// Querformat
} else {
// Hochformat
}Danach errechnen wir die neuen Maße des Bildes. Bei der ersten Variante setzen wir unseren Maximalwert der längeren Bildseite gleich und passen die andere Seite an. Dadurch vermeiden wir, dass das Bild evtl. vergrößert würde, falls das Original kleiner als unser gewünschtes Vorschaubild ist.
if (srcHeight < srcWidth) {
destWidth = maxsize / srcHeight * srcWidth;
destHeight = maxsize = maxsize <= srcHeight ? maxsize : srcHeight;
} else {
destWidth = maxsize <= srcWidth ? maxsize : srcWidth;
destHeight = maxsize / srcWidth * srcHeight;
}Die Variablen srcWidth und srcHeight sollten die Werte des Originalbildes haben und destWidth und destHeight bekommen die Werte für das neue, kleinere Bild. Mit diesen Werten kann nun das Vorschaubild erzeugt werden.
Wenn das neue Bild nicht nur kleiner, sondern auch quadratisch und mit einer Hintergrundfarbe gefüllt sein soll, dann muss dazu ein Bild mit den gewünschten Maßen (maximale Seitenlänge im Quadrat) erzeugt und mit der Wunschfarbe gefüllt werden. Anschliessend das Originalbild verkleinert und zentriert daraufkopieren.
Die zweite Variante, nur einen Ausschnitt zu kopieren, funktioniert etwas anders, da wir dazu den jeweiligen Offset, also den Versatz vom Bildrand, errechnen müssen.
offsetX = 0;
offsetY = 0;
if (srcHeight < srcWidth) {
offsetX = round ( (srcWidth / 2) - (srcHeight / 2) );
} else {
offsetY = round ( (srcHeight / 2) - (srcWidth / 2) );
}Mit diesen Werten kann nun ein Quadrat mit dem entsprechenden Abstand aus dem Originalbild verkleinert kopiert werden und das war es auch schon.
Wie die Bilder im einzelnen bearbeitet werden und welche Klassen oder Funktionen verwendet werden können oder sollten, hängt dann von der jeweiligen Programmiersprache und den verwendeten Bibliotheken ab, daher gehe ich darauf an dieser Stelle auch nicht weiter ein.
Trotz zunehmender Rechenleistung empfehle ich, die erzeugten Vorschaubilder für die weitere Verwendung zu speichern und nicht jedesmal neu zu generieren.
Siehe auch: