Das Modul zum Hochladen von Bildern

Die nachfolgende Bilderstrecke zeigt den Ablauf, wenn sowohl Javascript als auch das PHP-Modul zur Bildmanipulation aktiv ist.
Auf den Formulare befinden sich immer Schalter mit denen zum vorherigen Formular zurückgekehrt werden kann. In der Bilderstrecke werden nicht alle diese Schalter mit angezeigt.
Um die Formulare zur Bildmanipulation nicht mit Informationen zu überfrachten, sind die Erklärungen zu den Eingabefeldern oftmals ausgeblendet. Diese Erklärungen können bei Bedarf während des Upload-Vorgangs über den Link "Hinweise zum Formular" eingeblendet werden.

In den ersten Schritten (Wahl des Speicherortes und des Bildnamens) wird beim Absenden des Formulars jeweils Kontakt mit dem Server aufgenommen, um den Verzeichnispfad und den Bildnamen für den Nutzer zu reservieren und die schon vorhandenen Reservierungen für den Vorgang zu verlängern. Auch wenn das Bild zum Server gesendet wird, wird Kontakt mit dem Server aufgenommen. Auch dabei werden die Reservierungen verlängert, sofern sie noch gültig waren.
Das Zuschneiden, Drehen und Verkleinern wird dagegen clientseitig durch Javascript auf dem Gerät des Nutzers durchgeführt. Weil während dieser Schritte kein Kontakt mit dem Server aufgenommen wird, können die Reservierungen zu Beginn dieser Schritte nicht verlängert werden. Daher wird der Nutzer während dieser Schritte über einen Countdown darüber informiert, wie lange die Reservierungen noch gültig sind. Denn nach Ablauf der Reservierungszeit verweigert der Server das Speichern des Bildes. Der Upload-Vorgang muss dann neu begonnen werden.
Die Länge der Reservierungszeit können die System-Administratoren über die Systemeinstellungen festlegen.

---

Im ersten Schritt muss festgelegt werden, in welchem Hauptverzeichnis das Bild gespeichert werden soll. Das Formular bietet nur solche Hauptverzeichnisse an, in die der Aufrufer auch Bilder hochladen darf.

Nachdem das Hauptverzeichnis ausgewählt wurde, legt der Aufrufer fest, in welchem Unterverzeichnis das Bild gespeichert werden soll und welchen Namen das Bild auf dem Server haben soll. Der Name des Bildes wird allerdings nicht als Dateiname sondern als Verzeichnisnamen eingesetzt, da vom System in der Regel zu einem Bild mehrere Größenversionen erzeugt werden. Die Dateinamen geben dann Hinweise darauf, wie breit die einzelne Bildversion ist. Damit der Bild-Ordner übersichtlich bleibt, können innerhalb des Bildordners formularbasiert Unterverzeichnisse angelegt werden. Das Formular dafür wird hier nicht angezeigt. Es ist auf der gleichen Seite enthalten, auf der auch das Formular zur Wahl des Bildnamens enthalten ist.

Das Formular, in dem das Bild ausgewählt wird, informiert darüber, welche Bildtypen hochgeladen werden dürfen. Falls Javascript feststellt, das die ausgewählte Datei keinen der zugelassenen Dateitypen besitzt, verhindert es, dass das nächste Formular angezeigt wird.

Wenn der Aufrufer ein Bild vom Typ "image/gif" ausgewählt hat, welches nicht zu groß ist, kann er nach der Auswahl des Bildes entscheiden, ob das Originalbild hochgeladen werden soll, oder ob er es zuvor mit Javascript im Browser zuschneiden, drehen und verkleinern möchte.
Ist das Bild zu groß oder besitzt es einen anderen Bildtyp, wird sofort das Formular angezeigt, mit dem das Bild zugeschnitten und verkleinert werden kann. Falls das ausgewählte Bild sehr groß ist, wird es für die Ausgabe im Formular automatisch skaliert ("Zoom für Bildbearbeitung"), um den Zuschnitt zu erleichtern.

Vom ausgewählten Bild können - unabhängig von der gewählten Skalierung für die Bildansicht - pixelgenau Streifen an allen vier Bildkanten abgeschnitten werden und der Zuschnitt innerhalb der Reservierungszeit beliebig oft korrigiert werden. Im Browser wird sofort angezeigt, wie das Bild bei den gewählten Zuschnittwerten aussehen würde.

Mit dem nächsten Formular kann das Bild bei Bedarf gedreht werden. Über die beiden Eingabefelder "Grad" und "Zehntel-Grad" kann der Drehwinkel bestimmt werden. Wenn das Bild um einen anderen Winkel als 0°, 90°, 180° oder 270° gedreht wird, werden an allen vier Bildrändern jeweils Dreiecke ergänzt, damit die Kanten des resultierenden Bildes wieder pararallel zur Horizontalen und Vertikalen verlaufen und alle Bildinformationen erhalten bleiben.
Bei Bildern vom Typ "image/jpeg" kann zusätzlich gewählt werden, ob die ergänzten Flächen vollkommen transparent oder farbig sein sollen. Falls die Flächen farbig sein sollen, kann über drei Eingabefelder die Farbe aus den drei Grundfarben "gemischt" werden.
Besitzt das Bild einen anderen Typ, sind die ergänzten Flächen immer transparent.

Nach dem Drehen kann das Bild erneut zugeschnitten werden. Auch hier werden pixelgenau Bildstreifen an den vier Bildrändern des Ausgangsbildes abgeschnitten. Durch diesen zweiten Zuschnitt-Vorgang ist es möglich, ein Bild mit scheinbar bis zu 8 Ecken zu erzeugen. Dieser optische Eindruck entsteht dann, wenn die zusätzlichen Dreiecke transparent sind oder die Farbe der Dreiecke mit der Hintergrundfarbe der Seite übereinstimmt.

Im nachfolgenden Formular wird angezeigt, wie breit und hoch das Bild ist und welche Datenmenge voraussichtlich übertragen würde, wenn das Bild so wie angezeigt auf den Server hochgeladen würde. Das System informiert den Nutzer, falls diese Werte größer sind als jene Werte, welche die System-Administratoren in den System-Einstellungen für das Hochladen von Bildern festgelegt haben.
Mit dem Feld "Zoom für Speicherung" kann das Bild bei Bedarf skaliert verkleinert werden.
Für Bilder, vom Typ "image/jpeg" kann außerdem angegeben werden, wie stark die Bilddaten vor dem Upload komprimiert werden sollen.
Welche Größenversionen von dem Bild auf dem Server erzeugt werden sollen, wird mit den Checkboxen darunter festgelegt. Die System-Administratoren legen in den System-Einstellungen fest, welche Bildbreiten zur Auswahl angeboten werden können und wie viele Größen-Versionen maximal von einem Bild in einem Upload-Vorgang erzeugt werden können. Unabhängig von der gewählten Bildbreite wird der Server allerdings ein Bild niemals vergrößern.

Falls in das Bild ein Copy-Right-Hinweis geschrieben werden soll, werden die Felder zur Eingabe des Textes für den Copy-Right-Hinweis und die Radio-Buttons zur Wahl der Position und der Schriftfarbe für den Hinweis eingeblendet.

Nachdem das Bild auf den Server hochgeladen wurde, erzeugt dieser dazu die Bildversionen. Allerdings speichert der Server diese Bild-Versionen zunächst nur temporär und zeigt dem Nutzer die erzeugten Bildversionen, deren Bildmaße und die Datei-Größen.
Der Nutzer kann über den Schalter "Versionen ändern" in den Bearbeitungsmodus für das Bild zurückkehren, falls Korrekturen an den Bild-Versionen, dem Copy-Right-Hinweis oder sogar dem Bildausschnitt erforderlich sind.
Erst wenn der Schalter "Bild behalten" gewählt wird, werden die im Formular angezeigten Bildversionen dauerhaft in dem Ordner und unter dem Bildnamen gespeichert, die in den ersten Formularschritten vom Nutzer festgelegt wurden.