Sep 19, 2019/mod: Sep 19,2019 - 1 min read - プログラミング

htmlのimgタグに直接バイナリを埋め込む

thumbnail for this post

htmlを気軽に1ファイルで持ち運びたいのに、画像が別ファイルになってたりして色々不便だと思いませんか？

僕は、メモをmark downでとったりするので、出来上がったあとのhtmlと画像が別だとすごく不便なんです。

そこで、imgタグに画像そのものを埋め込んでしまうという方法で乗り切ろうと思います。

Base64でエンコードすれば埋め込める！

いきなりですが、ソースコードです。

require 'base64'
def img_to_base64(file_name)
  file_type=file_name[/\.(.*)/,1] ## 拡張子取得(jpgとかpngとか)
  src_filename = File.dirname(__FILE__) + '/' + file_name
  img_base64 = Base64.strict_encode64(File.binread(src_filename))
  return '<img src="data:image/' + file_type + ';base64,' + img_base64 + '" />' ## imgタグに埋め込むだけ
end

基本的に、base64でエンコードして、imgタグ内に埋め込むだけです。
出来上がったものは↓↓のようになります。

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAtAC0AAD/4TjoRXhpZgAATU0AKgAAAAgA.... />

実際ここに貼り付けてみます↓

どうでしょう？
htmlファイルのサイズが大きくなる以外は不都合は無い気がします。

投げ銭していただける場合は、amazonで15円からできます。宛先はheisakuあっとcomichi.comで。

マイナスは入れられないの？

« ブログを始めてから何すれば。。。 Golangのjsonでハマる »
comments powered by Disqus