Image aus binary data

Wie man aus Binary Daten ein Bild darstellen kann.

Einleitung

Neulich habe ich in der Audio Station der Synology gesehen das Coverdaten einer MP3 Datei aus den id3v2 Metadaten der MP3 Datei ausgelesen werden können. Die Audio Station verwendet dafür eine eigene CGI Datei welche das Bild darstellt.

Im TYPO3 habe ich vor kurzem die Extension t3getid3 benötigt, welche die Metadaten nahezu jeder Datei auslesen kann. Kurz getestet wurde das Coverbild auch in den Metadaten einer MP3 Datei gefunden, jedoch in Binären (binary data) Form. Somit stelle sich die nächste Frage, wie stellt man diese Binären Daten am schnellsten als Bild dar? Man könnte einen Extension Aufruf per eID machen und so das Bild darstellen. Auf der Suche nach einer Lösung fand ich wieder mal was Interessantes!

PHP Lösungsansatz


<?php

// Binäre Daten bereits vorhanden
header('Content-type: image/png');
echo $binary_data;

// Binäre Daten aus Bild erzeugen
$binary_data = file_get_contents('assets/test.png');
header('Content-type: image/png');
echo $binary_data;

?>
PHP Beispiele

Lösung im Netz

Die Lösung und somit auch die interessante Information fand ich wiedermal im Netz. Konkret war es diesmal der Wikipedia Eintrag über Data URI scheme. Welcher ich auf einer Seite von stackoverflow.com fand, bei welcher dasselbe Problem ebenfalls behandelt wurde.

HTML Test


<!-- image -->

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/
0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQ
AA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjga
ORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg
YPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon">

<!-- css backround image -->

<style type="text/css">
.base64bgimg {
	width: 30px;
	background-image: url('data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/
0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP/mf///yH5BAAAAAAALAAAAAAQ
AA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjga
ORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg
YPj/gAwXEQA7');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
</style>
<div class="base64bgimg">&nbsp;</div>

<!-- list-style-image -->

<ul style="list-style-image: url('data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/
0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQ
AA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjga
ORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg
YPj/gAwXEQA7');">
	<li>Zeile 1</li>
	<li>Zeile 2</li>
	<li>Zeile 3</li>
</ul>
HTML Beispiele ( Binäre Daten ohne Zeilenumbruch schreiben )
image
embedded folder icon
css backround image
 
list-style-image
  • Zeile 1
  • Zeile 2
  • Zeile 3

Fazit

Im Zusammenhang mit HTML5 und Cache Manifest ist dies ein spannender Ansatz, so muss man nicht jedes Bild referenzieren. Wenn dies auch die Mail Clients könnten ( muss ich noch testen ), müsste man nicht immer das Anzeigen der Bilder erlauben und kann Bilder gleich im HTML Code mitliefern.

Jedenfalls muss man für das Anzeigen der MP3 Coverdaten nicht zwingend eine eID Lösung erstellen.

Viel Spass beim selber testen.