Thumbnails mit ASP generieren

Geschrieben von: Christian Holm
Kategorie: Komponenten

Wenn man auf einer Webseite Bilder darstellt, z.B. für die Präsentation von Produkten, wird man bei steigender Bilderanzahl, nicht alle Bilder 1:1 darstellen, weil sonst die Download-Performance der Seite stark darunter leiden würde. Deshalb erstellt man kleinere, als Vorschau gedachte Bilder - eben Thumbnails. Dieser Artikel soll Ihnen anhand von Beispielen zeigen, wie man solche Thumbnails mit ASP und der ASPImage Komponente von ServerObjects dynamisch erstellen kann.

Einerseits gibt es natürlich Grafikprogramme, mit denen man die Thumbnails erstellen könnte, andererseits könnte man einen Batch-Prozeß über alle Bilder laufen, für den Fall, daß es das Programm unterstützt. Die genannten Möglichkeiten haben aber Nachteile. Zum einen, daß bei einer größeren Anzahl von Bildern die Offline-Erstellung der einzelnen Thumbnails zunehmend mühsam wird. Zum anderen hat man dann doppelt soviel Dateien wie vorher, was manchmal zu einem Engpaß führen kann.

Bei der Verwendung der Komponente in Zusammenhang mit ASP kann man diese Nachteile elegant und vor allem einfach umgehen. Damit kann man einfach von mehreren Bildern Thumbnails erstellen. Für den Fall, daß zuviele Dateien erstellt werden würden, kann man nach der Erstellung des Thumbnails durch die Komponente das Bild per BinaryWrite direkt zum Client schreiben. Bei Verwendung dieser Methode wird keine Datei auf den Webserver geschrieben.

Installation der Komponente

Nach dem Download der ASPImage Komponente registrieren Sie diese mit regsvr32 aspimage.dll auf dem Web Server - ein Setupprogramm gibt es nicht. Aber nichts desto trotz - die Komponente ist einsatzbereit, und wir können unsere ASP Scripts schreiben.

Generieren der Thumbnails

Das nun folgende Beispiel erzeugt aus einem vorhandenen Bild (zB vom Kunden upgeloadet) einen Thumbnail und speichert ihn in das angegebene Verzeichnis am Web Server. Da ja logischerweise ein Thumbnail kleiner als das Original ist, müssen wir die Abmessungen des Originales verkleinern. Die ASPImage Komponente unterstützt zwei Methoden, die für das Verkleinern eines Bildes zuständig sind - Resize und ResizeR.

Die Resize Methode ist dabei die schnellste. Dafür muß man aber an der Qualität des erzeugten Thumbnails Abstriche machen. Die andere Methode - ResizeR (Resize mit "Resampling") - resampled den Thumbnail zusätzlich, was sich in einem deutlichen Qualitätsunterschied bemerkbar macht. Siehe dazu die folgende beiden Screenshots:

Resizing ohne Resampling	Resizing mit Resampling

Sehen wir uns nun den Sourcecode an. Zuallererst instanzieren wir klarerweise ein Objekt mit VBScript und der Server.CreateObject Methode, und benennen die Instanz MyImage.

Set MyImage = Server.CreateObject("AspImage.Image")

Danach laden wir das Orginalbild mit der LoadImage Methode:

MyImage.LoadImage strOriginal

Die Variable strOriginal enthält hierbei den vollständigen, physikalischen Serverpfad und den Bilddateinamen des Originals. Nun können wir eigentlich schon mit dem Generieren des Thumbnails beginnen. Aber: Wenn wir das Bild verkleinern, wird es unweigerlich verzerrt, was wiederum unerwünscht ist.

Daher verändern wir nur die eine Seite des Bildes und passen mit einer Funktion die andere an, um so eine Verzerrung des Bildes zu vermeiden. Bevor wir aber mit dieser Funktion beginnen können müssen wir natürlich die Originalgröße des Bildes genau kennen.

Da wir dies natürlich nur programmatisch tun wollen, verwenden wir die GetImageFileSize Methode der Komponente. Die Methode hat als Parameter den vollständigen Pfad samt Dateinamen des Bildes und gibt seine Abmessungen zurück:

MyImage.GetImageFileSize strOriginal, X, Y
MyImage.MaxX = X
MyImage.MaxY = Y

Jetzt können wir mit dem Verkleinern anfangen, wobei wir die Orignalverhältnisse Breite zu Höhe natürlich unverändert lassen. Für dieses Beispiel habe ich die Resize mit Resampling Methode verwendet:

'maintain aspect ratio
ResizedY = (ResizedX / MyImage.MaxX) * MyImage.MaxY
MyImage.ResizeR ResizedX, ResizedY

Nach der erfolgten Verkleinerung speichern wir noch den Thumbnail am Web Server ab. Dies geschieht mit der SaveImage Methode der Komponente:

'saving thumbnail to disk
MyImage.ImageFormat = 3
MyImage.FileName= strThumb
MyImage.SaveImage

Für die Darstellung im Browserfenster brauchen wir noch:

Response.Write "<img src=" & strThumbName & "><br>"

Nachdem wir nun das MyImage Objekt eigenlich nicht mehr brauchen, können wir es sicher zerstören:

Set MyImage = Nothing

Wenn Sie die GenThumb.asp Datei, die diesen Beispielcode enthält (im Download) ausführen, erhalten Sie folgendes Ergebnis in einem Web-Browser:

Zusätzlich gebe ich, wie Sie hier sehen können, auch noch die Originalbild und Thumbnail Bildgrößen an. Dies ist einfach durch eine Verküpfung der verwendeten Variablen und Response.Write Statements zu lösen.

Das waren also die Schritte, um ein Thumbnail auf die Platte abzulegen - von wo es später beliebig oft abgerufen werden kann. Hat man oft veränderliche Daten, oder will aus anderen Gründen keine Thumbnails auf der Platte ablegen, dann empfiehlt sich die dynamische Generierung des Thumbnails In-Memory, und das direkte Schreiben an den Client mittels Response.BinaryWrite.

On-the-fly Generierung von Thumbnails

Das Szenario haben wir im obigen Absatz schon besprochen - also wie schwierig ist es? Nun, alles was Sie tun müssen, ist den Aufruf SaveImage Methode mit dem Aufruf von Response.BinaryWrite auszutauschen:

Response.BinaryWrite MyImage.Image

Die ASPImage Komponente stellt für solche Aktionen die Image Eigenschaft zur Verfügung. Image ist eine read-only Eigenschaft, die die Bildinformationen in binärer Form enthält.

Zum Abschluß präsentiere ich Ihnen BinWriteThumb.asp in seiner vollen Länge:

<% @LANGUAGE = VBScript %>
<% 
Set MyImage = Server.CreateObject("AspImage.Image")

'filename of original image w/ extension
Dim strOrigImg
strOrigImg = "aspheute.png"

'filename of thumbnail w/ extension
Dim strThumbName
strThumbName = "thumb.png"

'full path of original image
Dim strOrigImgFullPath 
strOrigImgFullPath ="G:\LocalSites\TestRoot\Artikel_ASPImage\"

'full path of generated thumbnail
Dim strThumbFullPath
strThumbFullPath = "G:\LocalSites\TestRoot\Artikel_ASPImage\"

Dim strOriginal, strThumb, ResizedX,ResizedY
strOriginal = strOrigImgFullPath & strOrigImg
strThumb = strThumbFullPath & strThumbName

'load original image
MyImage.LoadImage strOriginal

'Resize factor
ResizedX = 150
MyImage.GetImageFileSize strOriginal, X, Y
MyImage.MaxX = X
MyImage.MaxY = Y

'maintain aspect ratio
ResizedY = (ResizedX / MyImage.MaxX) * MyImage.MaxY
MyImage.ResizeR ResizedX, ResizedY

'writing thumbnail directly to client
Response.BinaryWrite MyImage.Image

'Cleanup
Set MyImage = Nothing
%>

Schlußbemerkung

Die ASPImage Komponente bietet natürlich nicht nur diese Funktionalität. Ich habe in diesem Artikel nur die für die Problemstellung erforderlichen Methoden der Komponente verwendet. Sie können mit dieser Komponente auch bereits erstellte Bilder (JPG, BMP, PNG, TGA and PCX) bearbeiten, völlig neue Bilder zu erstellen, als auch animierte GIFs zu handhaben.

Download des Codes

Klicken Sie hier, um den Download zu starten.

Verwandte Artikel

Bildinformationen selbst ermitteln
Eine kleine Bilddatenbank, Teil 1

Links zu anderen Sites

AspImage Komponente

Wenn Sie jetzt Fragen haben...

Wenn Sie Fragen rund um die in diesem Artikel vorgestellte Technologie haben, dann schauen Sie einfach bei uns in den Community Foren der deutschen .NET Community vorbei. Die Teilnehmer helfen Ihnen gerne, wenn Sie sich zur im Artikel vorgestellten Technologie weiterbilden möchten.

Haben Sie Fragen die sich direkt auf den Inhalt des Artikels beziehen, dann schreiben Sie dem Autor! Unsere Autoren freuen sich über Feedback zu ihren Artikeln. Ein einfacher Klick auf die Autor kontaktieren Schaltfläche (weiter unten) und schon haben Sie ein für diesen Artikel personalisiertes Anfrageformular.

Und zu guter Letzt möchten wir Sie bitten, den Artikel zu bewerten. Damit helfen Sie uns, die Qualität der Artikel zu verbessern - und anderen Lesern bei der Auswahl der Artikel, die sie lesen sollten.