Oft steht man vor folgendem Problem: Ein kleines, dynamisch erzeugtes Bild - bspw. eine Zugriffsstatistik - soll innerhalb einer HTML-Seite angezeigt werden. Problem ist aber, das nur der gerade angemeldete User das Bild abrufen können soll oder das Bild letztlich nur für den gerade aktuellen Besucher relevant ist. Also "ganz einfach" den Zugriff auf das Bild nur für diesen User freigeben und gleichzeitig dafür sorgen, das das Bild erst garnicht als Datei gespeichert wird - wenn dies nicht so aufwendig wäre...
Wie wäre es damit, das Bild direkt im HTML-Code gleich mit auszuliefern? Eigentlich kein Thema: RFC2397 definiert das URL-Schema "data" . Damit ist bspw. ein Bild wie folgt einzubetten:
Schade nur, das Microsoft nicht viel davon hält und dessen Browser folgerichtig das URL-Schema data: nicht unterstützen . Ein anderes schönes Beispiel liefert Stefan R. Müller hier. Dazu aber eine kleine Anmerkung: Firmenlogos kann damit nicht vor "Klau" schützen. Firefox erlaubt bspw. einfach das Speichern des Bildes .
Mit VIO.Matrix Desktop Content Management würde folgende Integration bspw. dafür sorgen, das der Besucher ein Bild hochladen und dieses auch wieder anschauen kann. Das Bild würde aber nie auf dem Webserver zwischengespeichert werden:
#SET fn = "#INSERT_KD_VAR_data*filename_file!.#INSERT_KD_VAR_data*filename_extension!" #ENDSET
Datei #INSERT_SP_VAR_fn! (#INSERT_KD_VAR_data*length! Bytes) wurde erfolgreich hochgeladen!
<img src="data:#INSERT_KD_VAR_data*contenttype!;base64,#INSERT_SP_PRINT_{{codec:base64}#INSERT_KD_VAR_data!}!" title="Test" />
<form action="index.html" method="post" enctype="multipart/form-data">
<input type="hidden" name="kd" value="#INSERT_KD_ID" />
<input type="hidden" name="or" value="#INSERT_OR_ID" />
<fieldset>
<legend style="margin-bottom: 10px;">Neues Bild hochladen</legend>
<label for="ffile">Datei:</label>
<input type="file" id="ffile" name="kd_data" value="" />
<label for="submit">Zum Upload bitte hier klicken:</label>
<button type="submit" id="submit" >Upload</button>
</fieldset>
</form> Anwendungsfälle in Content-Management-System Umgebungen Werden Websites mit Hilfe eines Content Management Systems (CMS) erzeugt, können grundsätzlich auch dynamisch Grafiken erzeugt werden. Dabei kann es sich beispielsweise um:
Diagramme (bspw. Zugriffsstatistiken, Preisentwicklungen, Nutzungshäufigkeiten , etc.) Zustandsanzeigen (bspw. Bearbeitungsstatus, Verfügbarkeiten , etc.) grafische Besucherzähler oder andere grafische Objekte handeln, welche letztlich nur für die gerade angezeigte Website und/oder dem aktuellen Besucher bestimmt sind. Normalerweise werden diese Grafiken von einem Content-Management-System dynamisch erzeugt (bspw. mit Hilfe des Batik-Serialisierers in VIO.Matrix), abgespeichert und auf der auszugebenden Website referenziert . Nachteil dieses Verfahrens ist, daß das Bild nach Betrachten durch den Besucher wieder gelöscht und vor unberechtigten Zugriffen geschützt werden muss (bspw. durch einen Cronjob) und vom Browser nachgeladen wird - was zu einer zeitlichen Verzögerung führen kann.
Durch Nutzung von Inline-Images kann ein Content-Management-System Bilder dynamisch im Speicher erzeugen und diese direkt in die HTML-Webseite einbetten. Das spätere Löschen und zeitliche Verzögerungen beim Nachladen entfallen vollständig.
Testbeispiel
#SET code="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" #ENDSET
<img src="data:image/png;base64,#INSERT_SP_PRINT_{{codec:web}#INSERT_SP_VAR_code!}!" alt="Testbild" />
Testen Sie hier die beschriebene VIO.Matrix-Funktion.
Nutzen Sie den Button
um den eingegebenen Code zu prüfen.
Über
können Sie den Ausgangszustand wiederherstellen.
Zeichen:
PUBLISH
Über diesen Button, können Sie Ihren, im oberen Fenster, eingebenen Code auf Richtigkeit überprüfen und den entsprechenden (X)HTML Code ausgeben lassen.
Code überprüfen