画像データを直接送れない場面・・・
例えば画像そのものをPOST送信するときとか、URLに変換したいときとか
そんなときに 画像データを base64形式 に変換する方法 をまとめました。
難しそうと思ってたけど、JavaScriptだけの機能で簡単にできます。
base64とはそもそも何なのか・・・
まあ base64 なんて日常生活じゃまず聞かない言葉ですよね。
これはバイナリデータをテキストとして扱うための規格
元々メールとかで使われてたんですが、今でも Rest API にデータを渡すときとかPOST通信するときにデータを送るために使われることがあります。
ちなみにbase64がどういうものか、特徴はこんな感じ
- 使える文字は64種類のみ具体的には A-Z 、 a-z 、 0-9 、 + / = だけ。ちなみに base64形式が = で終わることが多いのは、余った部分を埋めるパディングに利用されているから
- 主な使用場面電子メール（添付ファイルなんかは全部 base64 で送られる）、Basic認証、その他POST送信でデータを受け渡などする時
データ送信の縁の下の力持ち的な、そんな存在（かもしれない）
今回 base64 が必要になったのは、REST API でそのbase64形式のURLが必要だったからです。
でも自力で base64 を実装できないし、非効率すぎます。
そこで色々調べたところ、一番簡単で確実な方法が見つりました。それが次で紹介する方法です。
画像をbase64形式のURLに変換する手順
では具体的に画像を base64 に変換する方法について
base64形式の場合、PNG画像だったら data:image/png;base64... から始まるみたいなURLに変換されます（つまりURL自体が画像データを表すということ）
そのやり方とコード例は次の通り
たとえば画像のパスが次だとします。
1 | https://example.com/images/hoge.png |
これを data:image/png;base64... みたいな形式に変換したい訳です。
その変換用関数のコード例がコチラ
1 2 3 4 5 6 7 8 9 10 11 12 13 | function toBase64Url(url, callback){ var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } |
このコードで、重要なポイントは次の２つです。
- XMLHttpRequestを使うことなんでわざわざ旧的なものを使うかというと、バイナリデータはAjaxとかでは扱えないから.。上コードのように responseType に 'blob' を指定すればバイナリが受け取れる
- レスポンスをURL化するこのコードの reader.readAsDataURL(xhr.response); の部分。これを使うとbase64形式の data: から始まるURLを返してくる
バイナリを扱うのにAjax は使えません。
なので代わりに XMLHttpRequest を使ってます。（Fetch API でもOKかは不明）
そして上の関数を使い、画像をbase64に変換してるコード例がコチラ
1 2 3 | toBase64Url('images/star.png', function(base64Url){ console.log('base64Url : ', base64Url); }); |
実際にある画像を base64変換したURL は下のような感じです。
▼ 画像を base64 変換したURL
1 | data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdoAAAHFCAIAAADaBq+2AAAABnRSTlMAAAAAAABupgeRAAAQSklEQVR42u3da27sxpKF0fTgetR3cN2+oLqOToli8ZGPyMi1fhmwAVPgjg92WZb+KQAE8M/oBwDgv+QYIAQ5BghBjgFCkGOAEOQYIAQ5BghBjgFCkGOAEOQYIAQ5BghBjgFCkGOAEOQYIAQ5BghBjgFCkGOAEO...（略 |
data:image/png;base64 のあとにデータがずらずらと並ぶみたいな形式
ブラウザ上でアクセスすると、画像が表示されるはずです。
ちなみに画像をバイト配列に変換するには・・・
今紹介したのは base64形式のURL を作る方法
これ以外にも、画像データをバイト配列に変換するやり方もあります。
ついでなので、その方法も最後に紹介しときます。
そのやり方は さっきのコードを次のように書き換えるだけ です（関数名も変更）
1 2 3 4 5 6 7 8 9 10 11 12 13 | function toArrayBuffer(url, callback){ var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsArrayBuffer(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } |
ハイライトした８行目に注目！
このコードのように FileReader.readAsArrayBuffer を使います。
使い方はバイト配列化したい画像URLとコールバックを渡すだけです。
▼ たとえばこんなコード
1 2 3 | toArrayBuffer('images/kuma.png', function(base64Url){ console.log('base64Url : ', base64Url); }); |
▼ このコードの実行結果
1 | [-119, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, ... ] |
こっちは画像処理とか行いたいときに便利かも
（よく考えたら画素データとかじゃないから画像処理はムリか・・・）
ここまでのまとめ
正直言って画像を base64 に変換する場面ってほとんどありません。
でもアップローダー系の Rest API に画像を渡すときとか、POST送信する時とか、生の画像データを扱えない場面とか・・・
そういうときにbase64化する方法を知っておくと役立つかもしれないです。
以上、JavaScriptで画像をbase64形式に変換する方法でした。ではまた(^^)/~~~ﾊﾞｲﾊﾞｲ
