[php] base64エンコードされたデータの画像をphpで直接表示する方法

2020年4月30日

テクノロジー

t f B! P L
eyecatch 全食カレーでも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); なんとこれだけで解決でした・・・ アホな自分に乾杯!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ