XML-Technologien / XML / Python & XML / Die Simple API for XML / Erstellung eines Bildindex

Erstellung eines Bildindex

(Auszug aus "Python & XML" von Christopher A. Jones & Fred L. Drake, Jr.)

Wenn Sie jemals eine Bildbibliothek im Internet besucht haben, haben Sie sich vermutlich darüber gefreut (oder haben es sogar so erwartet), daß eine Ansammlung von kleinen Vorschau-Bildchen (Thumbnails) als Links für ihre entsprechenden großen Bilder stehen. Viele Künstler übernehmen diese effiziente Art, um damit Sammlungen aus Ihrer Arbeit online darzustellen. Mit dem Aufkommen von digitalen Kameras und Scannern stellen mehr und mehr Leute Verzeichnisse voll von Bildern in einem Format ins Web, das ein einfaches Stöbern gestattet. Im nächsten Abschnitt erstellen wir ein Python-Skript, das ein ganzes Verzeichnis von Bildern und Vorschau-Bildchen nimmt und eine HTML-Hauptseite erzeugt, auf der die Bildchen als Links zu den Bildern der vollen Größe agieren. Das Programm saxthumbs.py erwartet von Ihnen ein bereits existierendes Verzeichnis von Bildern und Vorschau-Bildchen und operiert auf der Ausgabe des Skripts index.py, das wir zuvor erstellt haben.

Damit in saxthumbs.py der SAX-Handler ein Thumbnail-Verzeichnis korrekt verarbeiten kann, müssen die Bilder einer Namenskonvention genügen (leicht zu ändern, indem der Code editiert wird). Im Moment erwartet der Handler in saxthumbs.py file-Elemente im XML-Dokument, zu denen eine entsprechende Datei <bildname>.jpg gehört, die das vollständige Bild darstellt, und eine Datei t-<bildname>.jpg, die das dazugehörende Vorschau-Bildchen ist (»t-« steht für Thumbnail).

Wenn Sie mit index.py eine Liste von Bilddateien erzeugen, wenden Sie es auf ein Verzeichnis an, das entsprechend benannte Bilddateien enthält:

$> ls -l *newimage*
-rw-rw-r-- 1 shm00 shm00 98197 Jan 18 11:08 newimage.jpg
-rw-rw-r-- 1 shm00 shm00 5272 Jan 18 11:42 t-newimage.jpg

Auf diese Weise wird jede Datei in den Index aufgenommen, die auf .jpg endet und zu der es eine entsprechende Datei t-<bildname>.jpg gibt (beachte den Unterschied in der Dateigröße).

Erzeugen von Vorschau-Bildchen

Sie können auf Unix-Systemen Ihre Bilddateien ganz einfach vorbereiten, nämlich mit dem convert-Befehl. Dieser Befehl ist Teil des ImageMagick-Pakets, das per Voreinstellung von den meisten Linux-Distributionen installiert wird. Für andere Unix-Systeme ist das Paket unter ImageMagick: Convert, Edit, And Compose Images verfügbar.

 $> convert image.jpg –geometry 192x128 t-image.jpg

Das nimmt image.jpg, egal wie groß es ist, und macht daraus ein Bildchen der Größe 192 × 128 Pixel im JPEG-Format. Bei einem Windows-Bitmap-Bild (mit der Erweiterung .bmp) können Sie natürlich mit einem zweiten Schritt trotzdem JPEG-Dateien bekommen:

$> convert image.bmp image.jpg
$> convert image.jpg –geometry 192x128 t-image.jpg

Nun, da Sie verstehen, wie convert funktioniert, können Sie mit einer einfachen Shell-Schleife Bildchen für jedes .jpg in Ihrem Bildverzeichnis produzieren:

$> for each in *jpg
> do
> convert $each -geometry 192x128 t-$each
> echo $each
> done

Am Ende sollten Sie etwa folgendes erhalten:

-rwxrwxr-x 1 shm00 shm00 97003 Jan 16 22:40 mvc-001s.jpg
-rwxrwxr-x 1 shm00 shm00 93373 Jan 16 22:40 mvc-002s.jpg
-rwxrwxr-x 1 shm00 shm00 86619 Jan 16 22:40 mvc-003s.jpg
-rwxrwxr-x 1 shm00 shm00 94894 Jan 16 22:40 mvc-004s.jpg
-rwxrwxr-x 1 shm00 shm00 76210 Jan 16 22:40 mvc-005s.jpg
-rwxrwxr-x 1 shm00 shm00 73704 Jan 16 22:40 mvc-006s.jpg
-rwxrwxr-x 1 shm00 shm00 80292 Jan 16 22:40 mvc-007s.jpg
-rw-rw-r-- 1 shm00 shm00 4434 Jan 21 11:46 t-mvc-001s.jpg
-rw-rw-r-- 1 shm00 shm00 4181 Jan 21 11:46 t-mvc-002s.jpg
-rw-rw-r-- 1 shm00 shm00 3604 Jan 21 11:46 t-mvc-003s.jpg
-rw-rw-r-- 1 shm00 shm00 4634 Jan 21 11:46 t-mvc-004s.jpg
-rw-rw-r-- 1 shm00 shm00 3339 Jan 21 11:46 t-mvc-005s.jpg
-rw-rw-r-- 1 shm00 shm00 2777 Jan 21 11:46 t-mvc-006s.jpg
-rw-rw-r-- 1 shm00 shm00 2996 Jan 21 11:46 t-mvc-007s.jpg

Dieses Listing zeigt die Anwendung des convert-Programms auf mvc-00*.jpg-Dateien, die mit einer digitalen Kamera aufgenommen wurden. Das Skript saxthumbs.py produziert Auszeichnungen, um sowohl die Bildchen als auch jedes individuelle Bild anzuzeigen.

Wenn Sie index.py auf diesem Verzeichnis ausführen, erzeugen Sie eine XML-Datei, die wir später auf diesen Seiten benutzen können, wenn wir das Vorgehen von saxthumbs.py behandeln:

$> ./index.py /home/shm00/images/ img.xml

Die neue Datei, img.xml, enthält file-Elemente, die Ihre Bilddateien in einem Format beschreiben, das für die Bearbeitung durch das Skript geeignet ist.

Erzeugen von Vorschau-Bildchen unter Windows

Falls Sie keinen Zugang zu Unix haben sollten (oder zu einer skriptsteuerbaren Bildverarbeitungssoftware für Ihr Betriebssystem), können Sie unter Windows Ihr eigenes Bildverzeichnis erzeugen. Stellen Sie nur sicher, daß Sie die Originale verkleinern und den Bildchen ein t- voranstellen und daß alle Bilder, die im Web angezeigt werden sollen, im JPEG-Format sind (also die Endung .jpg haben). Wenn Sie z. B. das Verzeichnis My Pictures in Photoshop öffnen, können Sie jedes Bild nehmen, es auf 192 × 128 Pixel bringen und als t- Version seines Originals speichern.

Um auf unser Beispiel zurückzukommen: Wenn Sie einmal ein solches Verzeichnis haben, können Sie index.py darauf loslassen und damit eine XML-Indexdatei für die Bilder erzeugen.

Implementieren des SAXThumbs-Handlers

Der SAXThumbs-Handler erzeugt für jedes Bildchen in der HTML-Ausgabedatei einen Anker und erstellt ein eigenständiges HTML-Dokument, um darin das vollständige Bild anzuzeigen. Am Ende hat SAXThumbs für Sie eine HTML-Seite produziert, in der alle Ihre Bildchen dargestellt werden, sowie eine HTML-Seite für jedes Bild in seiner ursprünglichen Größe.

Der SAXThumbs-Handler ist als Unterklasse von ContentHandler implementiert. Der Name der Ausgabedatei, die eine Vorschau aller Bildchen enthalten sollte, wird als Parameter in der Kommandozeile angegeben und an den Konstruktor übergeben:

def __init__(self, thumbsFilename):
   self.filename = thumbsFilename

def startDocument(self):
   self.fd = open(self.filename, "w")
   self.fd.write("<html><body>\n")

def endDocument(self):
   self.fd.write("</body></html>\n")
   self.fd.close( )

Wenn das Ende des XML-Dokuments erreicht wird, wird davon ausgegangen, daß es keine weiteren Bilddateien mehr zu verarbeiten gibt, und das Bildchendokument wird geschlossen.

Die restliche Arbeit wird in der startElement-Methode erledigt. Zuerst wird der Bildname ohne seine Pfadinformation kopiert:

def startElement(self, name, attrs):
  if name == "file":     
     filename = attrs.get("name", "")
     # Extrahiere nur den Dateinamen
     dir, localname = os.path.split(filename)
     localname, ext = os.path.splitext(localname)

Dann wird die Datei daraufhin untersucht, ob es sich bei ihr um ein Bildchen oder um ein vollständiges Bild handelt. Bildchen sind von HTML-Anker-Tags umgeben, die dann der Bildchen-Ausgabedatei hinzugefügt werden:

if localname.startswith("t-") and ext == ".jpg":      
      # Erzeuge Anker-Tag in thumbs.html
      fullImgLink = localname[2:] + ".html"
      self.fd.write('<br><a href="%s"><img src="%s%s"></a>\n' % (fullImgLink, localname, ext))

Falls es sich um ein vollständiges Bild handelt, wird eine eigene HTML-Datei erzeugt, die das Bild anzeigt:

fullImageFile = os.path.join(dir, localname) + ".html"
print "Wird erzeugt:", fullImageFile

fullImageHTML = ('<html><body><img src="%s%s"></body></html>\n' % (localname, ext))

lfd = open(fullImageFile, "w")
lfd.write(fullImageHTML)
lfd.close( )

Die HTML-Datei mit dem großen Bild wird im gleichen Verzeichnis erzeugt, das auch das Bild enthält. Die Bildchendatei wird im gleichen Verzeichnis erzeugt, in dem Sie thumbmaker.py ausführen. Das folgende Beispiel zeigt saxthumbs.py.

Beispiel: saxthumbs.py

import os

from xml.sax import ContentHandler      

class SAXThumbs(ContentHandler):
      """
      Dies ist der SAX-Handler, der eine Darstellung des ganzen Bildes (eine .html-Seite)
      für jede in der XML-Datei enthaltene Bilddatei erzeugt.
      Er fügt auch einen Anker auf der Bildchenseite hinzu, der das Bildchen zeigt
      und es mit der großen Bildseite verknüpft, die zuvor erzeugt wurde.
      """
      def __init__(self, thumbsFilename):
        self.filename = thumbsFilename

      def startDocument(self):
        self.fd = open(self.filename, "w")
        self.fd.write("<html><body>\n")

      def endDocument(self):
        self.fd.write("</body></html>\n")
        self.fd.close( )

      def startElement(self, name, attrs):
         if name == "file":     
           filename = attrs.get("name", "")
           # Extrahiere nur den Dateinamen
           dir, localname = os.path.split(filename)
           localname, ext = os.path.splitext(localname)

         if localname.startswith("t-") and ext == ".jpg":
           # Erzeuge Anker-Tag in thumbs.html
           fullImgLink = localname[2:] + ".html"
           self.fd.write('<br><a href="%s"><img src="%s%s"></a>\n' % (fullImgLink, localname, ext))

           fullImageFile = os.path.join(dir, localname[2:]) + ".html"
           print "Wird erzeugt:", fullImageFile
           fullImageHTML = ('<html><body><img src="%s%s"></body><html>\n' % (localname[2:], ext))
           lfd = open(fullImageFile, "w")
           lfd.write(fullImageHTML)
           lfd.close( )

Die Datei thumbmaker.py ist ein Skript, das XML von der Standardeingabe lädt und die SAXThumbs-Klasse beim SAX-Parser als den zu benutzenden Handler registriert. Das Beispiel unten zeigt die komplette Version von thumbmaker.py.

Beispiel: thumbmaker.py

#!/usr/bin/env python
# thumbmaker.py

import sys

from xml.sax import make_parser
from saxthumbs import SAXThumbs

# Hauptprogramm

ch = SAXThumbs(sys.argv[1])
parser = make_parser( )

parser.setContentHandler(ch)
parser.parse(sys.stdin)

Interessanterweise ist dies sehr ähnlich zum ersten Skript, das wir im Beispiel art.py formuliert haben.

Um thumbmaker.py zu starten, müssen Sie sich erst vergewissern, daß Sie die richtige Art von Verzeichnis mit den Bilddateien erzeugt haben und daß Sie index.py auf diesem Verzeichnis ausgeführt haben, um eine XML-Datei mit einer Liste von Dateien darin zu erstellen. Wenn Sie das haben, können Sie einen Namen für die Indexdatei aussuchen (etwa mythumbs.html) und ihn an das Skript übergeben:

 $> python thumbmaker.py mythumbs.html < img.xml

In diesem Fall ist mythumbs.html die Ausgabedatei, und die XML-Quelle ist die Datei img.xml.

Betrachten Ihrer Vorschau-Bildchen

Nach der Ausführung von thumbmaker.py haben Sie eine Bildchendatei in Ihrem aktuellen Arbeitsverzeichnis. Sie sollten diese Datei in jenes Verzeichnis verschieben, das Ihre Bilder enthält:

 $> mv mythumbs.html /home/shm00/tw/zero/images/

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema Python & XML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

XML-Grundlagen

XSLT

XSLT 2 und XPath 2 für Entwickler

Copyright © 2002 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Python & XML" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de