画像を簡単に Base64 コードに変換する方法がありました。

2021年4月19日

Pocket

この記事では Base64 コードを簡単に取得する方法をご紹介します。

ご存じでしたか?

画像を自身のホームページに表示したいときは画像を自分のサイトにアップロードしてimgタグsrc属性に指定しますよね。
WordPressでは画像をアップロードする場所を自身がきちんと認識していなくても何とか表示できます。

しかしPHPやJavaサーブレット等でシンプルに作成したWebサイトではちゃんと把握していないとsrc属性の値を誤り画像が表示されないという事態が発生します。

私自身「画像のURLはなんだっけなぁ・・・」と手探りで探すことが過去ありました。
・・・億劫ですね。

imgタグはsrc属性は「画像ファイルのアップロード先を指定する」以外に「Base64で表現された画像を表示する」という便利な指定の仕方があります。

<img src="data:image/png;base64,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" />

実際の画像はこうなります。

なかなかすごい!(imgタグの情報量もすごい!)

Base64とは

画像や音声(などなど)のファイルをA~Z,a~z,0-9,+と/の計64文字で表現するエンコード方式のことです。
(厳密には桁を埋めるためにさらに=が使用されます。)
Wikipedia参照

もともとメール送受信で文字以外のデータ(映像・画像・音声等)のやりとりの企画から生まれた方式で、いまではスピンアウトして単体で使うことも多くあります。

上記Wikipediaでは変換方法が紹介されていますよね。

  1. 元データを6ビットずつに分割。(6ビットに満たない分は0を追加して6ビットにする)
  2. 各6ビットの値を変換表を使って4文字ずつ変換。(4文字に満たない分は = 記号を追加して4文字にする)

ふむふむ・・・🤔
分かりません😑

Base64に変換するには

Base64に変換するにはいくつか方法があります。

  1. 変換サイトを利用する(参考サイト)
  2. GoogleChromeの開発者ツール(F12の機能)を使用する(参考サイト)
  3. 自作する!

私はずっと3で実践していました。

こんな画像を用意して

実装して

using System;
using System.IO;

namespace ConsoleApp1
{
    class Program
    {
        private const string source = @"D:\hoge\sample.png";
        private const string destination = @"D:\hoge\sample_base64_encoded.txt";

        static void Main(string[] args)
        {

            // 画像ファイルを読み込む
            using (var fs = new FileStream(source, FileMode.Open, FileAccess.Read))
            { 
                byte[] bs = new byte[fs.Length];
                fs.Read(bs, 0, (int)fs.Length);

                // Base64エンコードで文字列に変換
                string base64String = Convert.ToBase64String(bs);

                // 書き出す
                File.WriteAllText(destination, base64String);
            }
        }
    }
}

実行し結果を取得します。

簡単ですね。

 

どの方法が良いのか

自分のアプリケーション内で動的にBase64エンコードが必要になる場合(メールアプリ開発等)は3でしょうか。
ただ変換した結果を得たい。でも外部にファイルを送信するのは嫌というのであれば1か2でしょうかね。
私はただBase64の文字列が欲しいだけならば2番を推します😤

結局のところ使用用途によりけりということですね(笑

技術C#,ブラウザ

Posted by raika@blog