JavaScriptで画像をbase64形式のURLに変換するやり方

画像データを直接送れない場面・・・
例えば画像そのものをPOST送信するときとか、URLに変換したいときとか

そんなときに 画像データを base64形式 に変換する方法 をまとめました。

難しそうと思ってたけど、JavaScriptだけの機能で簡単にできます。

base64とはそもそも何なのか・・・

まあ base64 なんて日常生活じゃまず聞かない言葉ですよね。

これはバイナリデータをテキストとして扱うための規格

元々メールとかで使われてたんですが、今でも Rest API にデータを渡すときとかPOST通信するときにデータを送るために使われることがあります。

 

ちなみにbase64がどういうものか、特徴はこんな感じ

  • 使える文字は64種類のみ
    具体的には A-Za-z0-9+  /  =  だけ。ちなみに base64形式が =  で終わることが多いのは、余った部分を埋めるパディングに利用されているから
  • 主な使用場面
    電子メール(添付ファイルなんかは全部 base64 で送られる)、Basic認証、その他POST送信でデータを受け渡などする時

データ送信の縁の下の力持ち的な、そんな存在(かもしれない)

今回 base64 が必要になったのは、REST API でそのbase64形式のURLが必要だったからです。

でも自力で base64 を実装できないし、非効率すぎます。

そこで色々調べたところ、一番簡単で確実な方法が見つりました。それが次で紹介する方法です。

画像をbase64形式のURLに変換する手順

では具体的に画像を base64 に変換する方法について

base64形式の場合、PNG画像だったら data:image/png;base64...  から始まるみたいなURLに変換されます(つまりURL自体が画像データを表すということ)

そのやり方とコード例は次の通り

 

たとえば画像のパスが次だとします。

これを data:image/png;base64...  みたいな形式に変換したい訳です。

その変換用関数のコード例がコチラ

このコードで、重要なポイントは次の2つです。

  • XMLHttpRequestを使うこと
    なんでわざわざ旧的なものを使うかというと、バイナリデータはAjaxとかでは扱えないから.。上コードのように responseType  に 'blob'  を指定すればバイナリが受け取れる
  • レスポンスをURL化する
    このコードの reader.readAsDataURL(xhr.response);  の部分。これを使うとbase64形式の data: から始まるURLを返してくる

バイナリを扱うのにAjax は使えません。
なので代わりに XMLHttpRequest  を使ってます。(Fetch API でもOKかは不明)

 

そして上の関数を使い、画像をbase64に変換してるコード例がコチラ

実際にある画像を base64変換したURL は下のような感じです。

▼ 画像を base64 変換したURL

data:image/png;base64  のあとにデータがずらずらと並ぶみたいな形式

ブラウザ上でアクセスすると、画像が表示されるはずです。

ちなみに画像をバイト配列に変換するには・・・

今紹介したのは base64形式のURL を作る方法

これ以外にも、画像データをバイト配列に変換するやり方もあります。

ついでなので、その方法も最後に紹介しときます。

 

そのやり方は さっきのコードを次のように書き換えるだけ です(関数名も変更)

ハイライトした8行目に注目!

このコードのように FileReader.readAsArrayBuffer  を使います。

 

使い方はバイト配列化したい画像URLとコールバックを渡すだけです。

▼ たとえばこんなコード

▼ このコードの実行結果

こっちは画像処理とか行いたいときに便利かも
(よく考えたら画素データとかじゃないから画像処理はムリか・・・)

ここまでのまとめ

正直言って画像を base64 に変換する場面ってほとんどありません。

でもアップローダー系の Rest API に画像を渡すときとか、POST送信する時とか、生の画像データを扱えない場面とか・・・

そういうときにbase64化する方法を知っておくと役立つかもしれないです。

以上、JavaScriptで画像をbase64形式に変換する方法でした。ではまた(^^)/~~~バイバイ