全食カレーでもOKなぐらい、カレー好きな、下駄です。
本日の謎掛け
「base64」とかけまして・・・
「海外映画」と、ときます。
そのココロは・・・
文字を表示して、問題なく便利に見えるようにします。
base64は便利？
画像ファイル名をimgタグのsrc属性に入れる通常の使い方では、htmlファイルを読み込んだ後に、imgファイルの読み込みが発生するために、サーバーアクセスは、imgファイルの数だけ増えます。
もちろん、scriptタグもlinkタグも同じことが言えるのですが・・・
こうしたサーバーアクセスを減らす事で、webページの表示が思いの外早くなる事は、普通に考えると分かるのですが、そこで使えるのが、base64エンコードされた画像データです。
phpなどで"base64_encode(ファイル名)"としたり、linuxサーバーで"base64 ファイル名"とするだけで、簡単にファイルをbase64エンコードできます。
そのエンコードした値を下記のようにすることで、htmlファイルに埋め込むことが可能です。
# jpegファイルの場合
<img src="data:image/jpeg;base64,エンコードされたbase64データ">
# pngファイルの場合
<img src="data:image/png;base64,エンコードされたbase64データ">
# gifファイルの場合
<img src="data:image/gif;base64,エンコードされたbase64データ">
でも、画像データを文字列であるbase64データに変換すると、容量が1.5倍ぐらいに膨らんでしまいます。
サーバーアクセス数は減らせるけれど、トラフィックボリュームは増えてしまうというジレンマもありますね。
同じ画像を複数ページ内で表示しようとすると、base64はデータ容量が大きくなりすぎてしまうために、逆に非効率になってしまう事も考えられます。
もちろん、javascriptを使って、ページ内にライブラリとして読み込んだbase64画像データを、適材適所に配置（コピー）する処理を行っても良いのですが、少ししんどいページになることは間違いありません。
base64データをデコードして使わなければいけない状況発生
そんな事を調べている中で、base64データをimgタグに記載されたphpの内部での出力で、画像表示をしなければいけない状況が発生しました。
どういう状況なのかというと、gitリポジトリの中のデータをcat-fileで取り出して、画像ファイルの場合はバイナリデータになってしまうので、テキストでやり取りするために、一旦base64エンコードをして受け渡しをします。
その後、そのデータを受け取ったphpで、表示をするのですが、imgタグに書き込むbase64の記述をどうやってもうまく表示されません。
それもそのはず、imgタグ内のbase64は、モードを切り替えて表示しているので、phpファイルにアクセスしたら、ちゃんとバイナリで返してあげなければいけません・・・
gitリポジトリの画像ファイル
↓
git cat-file -p sample.jpeg | base64
↓
phpでデータを受け取り、画像表示
凡ミス発見！無事に解決
ContentTypeやheader記述などをいくら変えてもうまく表示できません。
でも、問題解決は、突然やってきます。
受け取ったbase64エンコードデータをデコードするだけで良かったんですね・・・
アホでした。
header('Content-Type: image/jpeg');
echo base64_decode($base64_encode_data);
なんとこれだけで解決でした・・・
アホな自分に乾杯！
