Flos Buzzword-Bingo

Allgemein

Um Bilder direkt in den HTML-Baum zu schreiben, muss man das Bild base64-encoded in das src-Attribut eines img-Tags schreiben. So kann man beispielsweise ein XML mit verschiedenen Dateien befüllen und per Javascript dann dynamisch nachladen. Mit PHP würde ein möglicher Zusammenbau -ungeachtet von den normalen Sicherheitsabfängen- wie folgt aussehen:

$objXmlBuilder = new XMLWriter();
 
$objXmlBuilder->openMemory();
$objXmlBuilder->startDocument("1.0", "UTF-8");
$objXmlBuilder->startElement("imageResponse");
$objXmlBuilder->setIndent(true);
 
$objXmlBuilder->startElement("images");
 
for ($intCnt = 1; $intCnt <= 5; $intCnt++)
{
  $strFilename = "datei{$intCnt}.gif";
  $strDir = "images/icons/32x32/";
  $strContent = file_get_contents($strDir.$strFilename);
 
  $objXmlBuilder->startElement("image");
  $objXmlBuilder->writeAttribute("title", $strFilename);
  $objXmlBuilder->writeRaw(base64_encode($strContent));
  $objXmlBuilder->endElement();
}
 
$objXmlBuilder->endElement();
 
$objXmlBuilder->endElement();
$objXmlBuilder->endDocument();
echo $objXmlBuilder->outputMemory();

Dieses Skript erzeugt ein XML, welches mal im Javascript verarbeiten kann. (Komplettes Beispiel unter der Box)

<?xml version="1.0" encoding="UTF-8"?>
<imageResponse>
 <images>
  <image title="datei1.gif">...</image>
  <image title="datei2.gif">...</image>
  <image title="datei3.gif">...</image>
  <image title="datei4.gif">...</image>
  <image title="datei5.gif">...</image>
 </images>
</imageResponse>

Beispiel XML mit Bildinformationen

Wenn man nun einen asynchronen Aufruf auf das PHP-Skript bzw. das XML aus Javascript startet, kann man die Bildinformationen aus den gewünschten Knoten auslesen und wie folgt zuweisen: "data:MIME-Type;CODIERUNG,DATEN"

function handleResponse(objResponse)
{
  try
  {
    objXml = objResponse.responseXML;
    /// weiter auslesen je nach Form mit z.B.
    /// xxx.getElementsByTagName("image")
    strBildDaten = objXmlKnoten.textContent;
    document.getElementById("meinBild1").src="data:image/gif;base64,"
      + strBildDaten;
  }
  catch (objException) { /* error_log */ }
}

Wenn man nun noch intelligent die Bilddaten im Speicher hält, muss man sie kein zweites Mal laden.