Как встроить изображения в один файл HTML / PHP? - PullRequest
Новая
       36

Как встроить изображения в один файл HTML / PHP?

21 голосов
/ 24 февраля 2010

Я создаю легкий инструмент администрирования базы данных с одним файлом, и я хотел бы связать с ним несколько небольших значков. Каков наилучший способ вставлять изображения в файл HTML / PHP?

Я знаю метод, использующий PHP, где я бы вызвал тот же файл с параметром GET, который выводил бы жестко закодированные двоичные данные с правильным заголовком, но это кажется немного сложным.

Могу ли я использовать что-то для передачи изображения непосредственно в объявлении CSS background-image? Это позволило бы мне использовать технику CSS-спрайтов.

Поддержка браузера здесь не проблема, поэтому приветствуются и более экзотические методы.

EDIT

Есть ли у кого-нибудь ссылка / пример того, как правильно генерировать URL-адреса данных с помощью PHP? Я бы подумал, что echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) будет достаточно, но я могу ошибаться.

Ответы [ 3 ]

43 голосов
/ 24 февраля 2010

Решением для встраивания изображения непосредственно в HTML-страницу является использование схемы URI данных

Например, вы можете использовать некоторую часть HTML, которая выглядит следующим образом: 

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

На странице википедии, на которую я ссылаюсь, есть и другие решения:

  • включая изображение как правило CSS
  • Использование некоторого Javascript.

Но учтите, что эти решения не будут работать во всех браузерах - вы сами решаете, приемлемо это или нет, в вашей конкретной ситуации.


Редактировать: чтобы ответить на вопрос, который вы задали о "Как правильно генерировать URL-адреса данных с помощью PHP" , посмотрите немного ниже на странице википедии о схеме URI данных , что дает эту часть кода (цитирование) : 

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" />
6 голосов
/ 24 февраля 2010
0 голосов
/ 09 марта 2010

Для одного PHP-сценария на стороне сервера попробуйте кодирование base64 графики и используйте простую логику в стиле контроллера: 

<?
/* 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;
...
}
?>
...