Geschrieben von: Christian Holm
Kategorie: Komponenten
This printed page brought to you by AlphaSierraPapa
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.
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.
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.
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
%>
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.
This printed page brought to you by AlphaSierraPapa
Klicken Sie hier, um den Download zu starten.
http://www.aspheute.com/code/20010212.zip
Bildinformationen selbst ermitteln
http:/www.aspheute.com/artikel/20001130.htm
Eine kleine Bilddatenbank, Teil 1
http:/www.aspheute.com/artikel/20020703.htm
AspImage Komponente
http://www.serverobjects.com/products.htm#aspimage
©2000-2006 AspHeute.com
Alle Rechte vorbehalten. Der Inhalt dieser Seiten ist urheberrechtlich geschützt.
Eine Übernahme von Texten (auch nur auszugsweise) oder Graphiken bedarf unserer schriftlichen Zustimmung.