JavaScript(Node.js)を使った画像ファイルのBase64エンコード

JavaScript

Base64とはなんだろう

BASE64エンコードとは、英数字64種類のみを用いたデータ変換手法です。
エンコード後のデータ量は、エンコード前の約3割り増しです。
かんたんに言えば、バイナリデータをテキストデータに変換します。
メールで画像を送ったりする時に使用されていた名残です。

Base64のデータフォーマット

data:<MIME種別;><文字コード;><base64(固定),>テキスト化されたデータが入る

MIME種別

画像ファイルのMIME種別は、下記の通り3つが対応しています。

  • image/gif (GIF画像)
  • image/jpeg(JPEG画像)
  • image/png (PNG画像)

その他

  • text/plain(プレーンテキスト)
  • text/html(HTMLテキスト)

などもあります。

Base64データの例

jpg(jpeg)画像ファイルの場合

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wB
※テキストファイルではないので、「charset=」は省略します。

HTMLの場合

data:text/html;charset=utf-8;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wB
※テキストファイルなので、「charset=」は記載します。

 

サンプルソース

/* 画像ファイルをBase64に変換する */
let fs = require('fs');

fs.readFile( '01.jpg', function( err, content ) {
if( err ) {
  console.error(err);
}
else {
  /* Base64変換 */
  let base64_data = "data:image/jpeg;base64," + content.toString( 'base64' );
  console.log( base64_data );
}
});

 

解説

4行目:ここで画像ファイル(01.jpg)をreadFile()で読み込んでやると、コールバック関数のcontentにバイナリデータが読み込まれる

10行目:先頭に固定文字列で「MIME種別;base64(固定),」を設定していますが、画像ファイルのヘッダーを見てMIME種別を自動判定させても良いでしょう。
あとは、バイナリデータをtoString()のエンコード形式「base64」で変換してやる

巨大な画像ファイルをエンコードして、画面出力させるとえらいこっちゃになるので気をつけてください。

メモ

その他にも、下記の方法で試してみたがイマイチよくわからなかったので、メモとして置いておく
・toDataURLを使う
・urlsafe-base64を使う
・node-base64-image を使う
・multer/expressを使う
・bufferクラスを使う

タイトルとURLをコピーしました