it-swarm.com.de

Einbetten von Bildern in ein einzelnes HTML / PHP Datei?

Ich erstelle ein einfaches Tool zur Verwaltung von Einzeldateien-Datenbanken und möchte einige kleine Symbole damit bündeln. Wie binde ich Bilder am besten in eine HTML/PHP-Datei ein?

Ich kenne eine Methode mit PHP, bei der ich dieselbe Datei mit einem GET-Parameter aufrufen würde, der fest codierte Binärdaten mit dem richtigen Header ausgibt, aber das scheint etwas kompliziert.

Kann ich etwas verwenden, um das Bild direkt in einer CSS background-image-Deklaration zu übergeben? Dies würde es mir ermöglichen, die CSS-Sprite-Technik zu verwenden.

Browserunterstützung ist hier kein Problem, daher sind auch exotischere Methoden willkommen.

EDIT

Hat jemand einen Link/ein Beispiel, um Daten-URLs mit PHP richtig zu generieren? Ich würde mir vorstellen, dass echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) ausreicht, aber ich könnte mich irren.

19
Tatu Ulmanen

Eine Lösung, um ein Bild direkt in eine HTML-Seite einzubetten, wäre die Verwendung des Daten-URI-Schemas

Beispielsweise könnten Sie einen Teil von HTML verwenden, der so aussieht:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Es gibt andere Lösungen auf der Wikipedia-Seite, die ich verlinkt habe:

  • einfügen des Bildes als CSS-Regel
  • Mit etwas Javascript.

Beachten Sie jedoch, dass diese Lösungen nicht in allen Browsern funktionieren. Ob dies in Ihrer speziellen Situation akzeptabel ist oder nicht, müssen Sie selbst entscheiden.


Bearbeiten: , um die Frage zu beantworten, die Sie gestellt haben "wie man Daten-URLs richtig mit PHP generiert" , werfen Sie einen Blick in die Wikipedia-Seite über das Daten-URI-Schema , das diesen Teil des Codes angibt (in Anführungszeichen) :

function data_uri($file, $mime) 
{  
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents); 
  return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" />
40
Pascal MARTIN
6
Jack

Versuchen Sie für ein serverseitiges PHP -Skript eine base64-Kodierung der Grafik und verwenden Sie eine einfache Logik im Controller-Stil:

<?
/* store image mime-type and data in script use base64 */
$images = array('photo.png' => array('mimetype' => 'image/png',
                                     'data' => '...'));
/* use request path, e.g. index.php/photo.png */
$action = substr($_SERVER['PATH_INFO'], 1);
switch($action) {
case (preg_match('/\.png$/', $action)?$action:!$action):
  header("Content-Type: {$images[$action]['mimetype']}");
  /* use expires to limit re-requests on navigation */
  $expires = gmdate('D, d M Y H:i:s \G\M\T', filetime(__FILE__) + 365*24*60*60);
  header("Expires: {$expires}");
  $data = base64_decode($images[$action]['data']);
  header('Content-Length: ' . strlen($data));
  echo $data;
  break;
...
}
?>
0
Steve-o