Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
![[Bildschirmfoto]
Grafik als Zeichenkette speichern und wieder als Grafik ausgeben](img/grafiken_als_zeichenkette_speichern.webp "[Bildschirmfoto]
Grafik als Zeichenkette speichern und wieder als Grafik ausgeben")
Das folgende PHP-Script erstellt eine Zeichenkette (Base64-Code) aus einer Grafik.
1
2
3
4
5
6
<?php
$code = file_get_contents("grafik.png");
echo '<textarea rows="12" cols="60" readonly="readonly"
onclick="this.select()">' . base64_encode($code) .
'</textarea>';
?>
Mit der PHP-Funktion file_get_contents() die Grafik einlesen, mit base64_encode() kodieren
und (zum einfacheren kopieren) in ein Textarea einfügen.
= grafik.png
Um den Base64-Code im Beispiel gering zu halten wird hier nur eine kleine Grafik verwendet.
Das Script erstellt folgende Ausgabe (ziemlich gruselig 
)
Tool: Base64 Decoder - Erstellen eines Base64-Codes aus einem Bild.
Und was soll das ganze?
Der erstellte Base64-Code kann zum Beispiel direkt in den HTML / PHP-Quelltext, der CSS-Anweisung eingebaut oder in einer Datenbank gespeichert werden. Vorteil: Die Grafik wird schneller geladen, benötigt weniger Speicherplatz und kann problemlos in Dateien transportiert werden.
Grafik in eine HTML-Datei einbauen
Beispiel - Den erstellten (Base64)-Code direkt in ein <img>-Tag einfügen:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA[...]AAAAABJRU5ErkJggg==" alt="Stern">
image/png = Mimetyp » Mimetypen
[...] = (Base64)-Code wurde gekürzt.
Grafik in eine PHP-Datei einbauen
Beispiel - Den erstellten (Base64)-Code in den PHP-Quelltext einfügen:
Quelltext: grafikausgabe.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
<?php
switch ($_GET["img"]) {
case "1":
$code = "iVBORw0KGgoAAAANSUhEUgAAA[...]AAAAABJRU5ErkJggg==";
break;
case "2":
$code = "iVBORw0KGgoAAAEUNASUhgACA[...]AAAAACACCKMZAbbA==";
break;
}
header("Content-type: image/png");
echo base64_decode($code);
?>
Die Grafik kann man nun wie folgt ausgeben:
<img src="grafikausgabe.php?img=1">
Grafik in eine CSS-Anweisung einbauen
Beispiel - Den erstellten (Base64)-Code in die CSS-Anweisung einfügen:
<style>
div#test {
background:#EEFFEE
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA[...]AAAAABJRU5ErkJggg==")
no-repeat center center;
width: 50px;
height: 50px;
border: Dashed 1px #000000;
}
</style>
<div id="test"></div>
| Ausgabe: |
|---|
Grafik in eine CSS-Anweisung einbauen (Beisp. 2)
<style>
a.stern::before {
content: url("data:image/png;base64,iVBORw0KGgoAAAA[...]ORK5CYII=");
padding: 0 5px 0 0;
white-space: Nowrap;
vertical-align: Middle;
}
</style>
<a href="#" class="stern">Link 1</a> <br>
<a href="#" class="stern">Link 2</a>
Siehe auch: CSS - Datum als Kalenderblatt darstellen
Grafik in einer DB-Tabelle speichern
Da bei größeren Grafiken die erzeugte Zeichenkette ganz schön lang sein kann, sollte das Feld in der MySQL/MariaDB - DB-Tabelle vom Typ: LONGBLOB sein.
Tipps
PHP - Bild in einer Datenbank-Tabelle speichern und ausgeben
CSS - Datum als Kalenderblatt darstellen
CSS - Kalender Symbol neben dem Datepicker
Die Bilder sollten, wenn es möglich ist, zuvor mit einem Grafikprogramm optimiert werden (Farben reduzieren, Größe optimieren).
Für das PNG-Format eignet sich das Tool: PNG-Optimizer
- psydk.org/pngoptimizer