web-dev-qa-db-fra.com

Comment incorporer des images dans un seul HTML / PHP fichier?

Je suis en train de créer un outil d’administration de base de données léger, composé d’un seul fichier, et je souhaiterais y inclure quelques petites icônes. Quel est le meilleur moyen d'intégrer des images dans un fichier HTML/PHP?

Je connais une méthode utilisant PHP où je voudrais appeler le même fichier avec un paramètre GET qui produirait des données binaires codées en dur avec le bon en-tête, mais cela semble un peu compliqué.

Puis-je utiliser quelque chose pour passer l'image directement dans une déclaration CSS background-image? Cela me permettrait d'utiliser la technique CSS Sprite.

Le support du navigateur n’est pas un problème ici, donc des méthodes plus exotiques sont également les bienvenues.

MODIFIER

Quelqu'un at-il un lien/exemple sur la façon de générer correctement des URL de données avec PHP? Je pense que echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) serait suffisant mais je peux me tromper.

phphtmlimagepngembed
19
Tatu Ulmanen

Une solution pour incorporer une image directement dans une page HTML consisterait à utiliser le schéma d'URI data

Par exemple, vous pouvez utiliser une partie du code HTML ressemblant à ceci:

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

Il y a d'autres solutions sur la page wikipedia à laquelle j'ai lié:

  • inclure l'image en tant que règle CSS
  • Utiliser du Javascript.

Notez cependant que ces solutions ne fonctionneront pas sur tous les navigateurs - à vous de décider si cela est acceptable ou non, dans votre situation spécifique.


Edit: pour répondre à la question que vous avez posée sur "Comment générer correctement des URL de données avec PHP", jetez un oeil un peu plus bas dans la page wikipedia du Schéma d'URI des données , qui donne cette portion de code (citant)}:

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

Quelque chose comme ça?

http://www.sveinbjorn.org/dataurls_css

6
Jack

Pour un script PHP côté serveur, essayez un encodage base64 du graphique et utilisez une simple logique de type contrôleur:

<?
/* 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