base64とは、すべてのデータをアルファベット(a～z, A～z)と数字(0~9)、一部の記号(+,/)の64種類の文字と=に変換するエンコード方式です。これを使えば画像ファイルのようなバイナリファイルであっても文字列に置き換えることができるので便利です。
そしてC#であれば簡単にこれをおこなうことができます。ここではPNGファイルをbase64エンコードしたりデコードしてもとの画像ファイルに戻すアプリケーションをつくってみます。
画像ファイルをBase64へ変換
ボタンをクリックするとファイルを選択するためのダイアログが出現します。PNGファイルを選択するとbase64エンコードがおこなわれて文字列がRichTextBoxに表示されます。
ファイルを読み込んだらファイルのパスからBitmapオブジェクトを生成します。これをMemoryStreamに保存してMemoryStream.ToArrayメソッドでbyte配列に変換します。これをConvert.ToBase64Stringメソッドの引数に渡せばbase64エンコードされた文字列を取得することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
public partial class Form1 : Form { OpenFileDialog _openFileDialog = new OpenFileDialog(); private void ButtonPngToBase64_Click(object sender, EventArgs e) { _openFileDialog.Filter = "PNGファイル(*.png)|*.png"; if (_openFileDialog.ShowDialog() == DialogResult.OK) { Bitmap bitmap = new Bitmap(_openFileDialog.FileName); richTextBox1.Text = BitmapToBase64String(bitmap); bitmap.Dispose(); } } string BitmapToBase64String(Bitmap bitmap) { using (MemoryStream ms = new MemoryStream()) { bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png); byte[] bites = ms.ToArray(); return Convert.ToBase64String(bites); } } } |
Base64を画像ファイルへ変換
文字列を読み込んだらConvert.FromBase64Stringメソッドで文字列をbyte配列に変換します。byte配列をMemoryStreamのコンストラクタの引数にしてMemoryStreamオブジェクトを生成します。これをBitmapのコンストラクタに渡せばBitmapオブジェクトを生成することができます。あとはファイルとして保存するだけです。
Base64StringToBitmapメソッドに不適切な文字列を渡すと例外が発生します。そのため例外処理をおこなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
public partial class Form1 : Form { SaveFileDialog _saveFileDialog = new SaveFileDialog(); private void ButtonBase64ToPng_Click(object sender, EventArgs e) { _saveFileDialog.Filter = "PNGファイル(*.png)|*.png"; if (_saveFileDialog.ShowDialog() == DialogResult.OK) { try { Bitmap bitmap = Base64StringToBitmap(text); bitmap.Save(_saveFileDialog.FileName, System.Drawing.Imaging.ImageFormat.Png); bitmap.Dispose(); } catch { MessageBox.Show("エラー"); } } } Bitmap Base64StringToBitmap(string str) { byte[] bytes = Convert.FromBase64String(str); using (MemoryStream ms = new MemoryStream(bytes)) { return new Bitmap(ms); } } } |
画像をBase64エンコードしてHTMLに埋め込む
画像をBase64エンコード（変換）してHTMLに埋め込むとサイトの表示速度を少しだけ速くすることができます。
使い方はこんな感じです。あと本題とは関係ありませんが代替テキストも設定しておきましょう。
代替テキストとは画像などテキストコンテンツではないものを説明する短い文です。代替テキストを用いることで、音声読み上げソフトを利用したときにその画像が何なのか読み上げてくれたり、検索エンジンにその画像がなにかを認識させやすくなります。検索エンジンからの流入を期待しているのであればSEO的にもやや有利になるので設定しておきましょう。
……と言ってはみたものの鳩でもわかるC#管理人自体がimgタグを使用するときに代替テキストを設定していないケースが多々あります。
画像ファイルと比較すると画像をBase64エンコード（変換）してHTMLに埋め込む場合、文字列データが増えるので全体の大きさとして約1.3倍になります。またあとになって自分が作成したHTMLを編集するときに、「あれ、この文字列はどの画像のものだったっけ？」なんてこともあります。このようなデメリットもあるので、ここは臨機応変に判断してください。
