HTML で Base64 画像を表示する
このチュートリアルでは、base64 画像を HTML で表示する方法を紹介します。Base64 イメージは、base64 エンコーディングアルゴリズムによって変換された読み取り可能な文字列です。
HTML で img タグを使用して Base64 画像を表示する
img タグを使用して、Base64 でエンコードされた画像を HTML ドキュメントに埋め込むことができます。ブラウザは小さい画像に対して追加のページ読み込みリクエストを行う必要がないため、ページの読み込みが速くなるので便利です。画像の URL は、img タグの src 属性で指定できます。src 属性で画像に関する情報を提供することにより、base64 画像を表示できます。src 属性で正確なコンテンツタイプ、コンテンツエンコーディング、および文字セットを定義する必要があります。構文を以下に示します。
data:[content-type][;charset],<data>
文字列が PNG 画像であることを示す image/png としてコンテンツタイプを指定できます。次に、文字セットを base64 として指定できます。セミコロンは、コンテンツタイプと文字セットを区切ります。その後、画像の base64 文字列を指定できます。ここのようなツールを使用して、画像を base64 画像に変換できます。リンクここからカスタム base64 イメージを作成することもできます。このように、img タグを使用して base64 イメージを HTML で表示できます。
サンプルコード：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg==">
base64_encode()PHP 関数を使用して、HTML を使用して Base64 画像を表示する
base64_encode()PHP 関数を使用して、画像を base64 文字列にエンコードできます。mime_content_type() 関数は、提供されたデータのコンテンツタイプを返します。これらの関数を使用して、img タグの src を生成できます。したがって、base64 イメージを表示できます。file_get_contents() 関数を使用して、base64 文字列に変換される画像を読み取ることができます。
たとえば、$img 変数を作成し、画像の URL を保存します。次に、file_get_contents() 関数を使用して画像を読み取り、base64_encode() 関数を使用して画像を base64 文字列に変換します。次に、img 変数で mime_content_type() 関数を使用して、コンテンツタイプを取得します。次に、変数 imgSrc を作成し、上記の構文に従って変数を配置します。最後に、echo 関数を使用して、src 属性が imgSrc 変数に設定されている HTML img タグを表示します。
したがって、PHP を使用して base64 画像を表示できます。
サンプルコード：
$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';