浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】画像をBase64に変換するパッケージ「base64-img」

canvas を使う方法もあるようですが、パッケージを使った方が簡単そうだったので、試しに導入してみました。
画像ファイルを Base64 に変換する方法です。
今回使用したパッケージはこちらの「base64-img」です。

GitHub – douzi8/base64-img: convert img to base64, or convert base64 to img
https://github.com/douzi8/base64-img

画像を Base64 に変換できますし、その逆の Base64 を画像に変換することもできます。

 

さて、導入方法ですが、まずはパッケージをインストールします。

npm install base64-img --save

そうしたら、パッケージを require します。

const base64Img = require('base64-img');

あとは、実行したい関数を記述すればOKです。
私は画像を Base64 に変換したかったので、下記の関数を使用しました。

base64Img.base64('[変換したい画像パス]', function(err, data) {
  // 行いたい処理
});

正常に処理が完了すれば、変数 data に変換後のデータが格納されるはずです。

が、私の環境では、下記のようなエラーが発生してしまいました。
Uncaught TypeError: a.readFile is not a function.
「a.readFile は関数ではありません」とのことですが…これってどこのことを指しているの?
現在、絶賛調査中です。
コードもとても単純になるので、出来ればこのパッケージを使えるようにしたいですね。

 

以上、画像をBase64に変換するためのパッケージ「base64-img」についての紹介でした。

なお、パッケージを使わずに、JavaScript で書きたい場合は、こちらの記事が参考になります。

[JavaScript] 画像変換:要素 ⇔ Base64(相互変換) – Qiita
https://qiita.com/yasumodev/items/e1708f01ff87692185cd

  • この記事いいね! (0)