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.

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 in ein <img>-Tag einfügen:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA[...]AAAAABJRU5ErkJggg==" alt="Stern">

[...] = (Base64)-Code wurde gekürzt.   image/png = Mimetyp » Mimetypen

Grafik in eine PHP-Datei einbauen

Beispiel - Den erstellten (Base64)-Code in den PHP-Quelltext einfügen:

Quelltext „grafikausgabe.phpKopierenAusblendenZeilen

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

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.

Tipp

Die Bilder sollten, wenn es möglich ist, zuvor mit einem Grafikprogramm optimiert werden. Für das PNG-Format eignet sich das Tool psydk.org/pngoptimizer