web-dev-qa-db-ja.com

単一のHTML / PHPファイルに画像を埋め込む方法は？

軽量な単一ファイルのデータベース管理ツールを作成しています。小さなアイコンをいくつかバンドルしたいと思います。 HTML/PHPファイルに画像を埋め込む最良の方法は何ですか？

私はPHPを使用する方法を知っています。ここで、正しいパラメータでハードコードされたバイナリデータを出力するGETパラメータで同じファイルを呼び出しますが、少し複雑に見えます。

CSS _background-image_宣言で画像を直接渡すために何かを使用できますか？これにより、CSSスプライト技術を利用できるようになります。

ブラウザのサポートはここでは問題ではないので、よりエキゾチックなメソッドも歓迎します。

[〜＃〜]編集[〜＃〜]

誰かがPHPでデータURLを適切に生成する方法へのリンク/例を持っていますか？ echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png'))で十分だと思いますが、間違っている可能性があります。

phphtmlimagepngembed
22
Tatu Ulmanen

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を使用する。

ただし、これらのソリューションはすべてのブラウザで機能するわけではないことに注意してください。特定の状況で、これが許容できるかどうかを判断するのはあなたです。


編集："PHPでデータURLを適切に生成する方法"、ウィキペディアのページで データURIスキーム について少し下を見てください。コードのこの部分を示しています（quoting）：

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" />
45
Pascal MARTIN

このようなもの？

http://www.sveinbjorn.org/dataurls_css

6
Jack

1つの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;
...
}
?>
0
Steve-o