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

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 AusblendenKopierenLinkZeilen

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>

Link 1
Link 2
Link 3

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