【保存版】Node.jsでBase64画像をカンタンにディスクへ保存する方法

2024-05-13

Node.js で Base64 エンコードされた画像をディスクに保存する方法

Base64 エンコードされた画像は、API レスポンスや HTML の img タグなど、さまざまなソースから取得できます。取得方法はソースによって異なりますが、一般的には以下のいずれかの方法を使用します。

API レスポンスから取得: API レスポンスが JSON 形式の場合は、data フィールドに Base64 エンコードされた画像データが含まれている場合があります。
HTML の img タグから取得: HTML の img タグの src 属性には、Base64 エンコードされた画像データが含まれている場合があります。

Base64 エンコードされたデータを取得したら、Buffer モジュールを使用してデコードする必要があります。以下のコード例は、Base64 エンコードされた文字列を Buffer オブジェクトに変換する方法を示しています。

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00'
const buffer = Buffer.from(base64String, 'base64');

画像ファイルを保存する

Base64 エンコードされたデータをデコードしたら、fs モジュールを使用して画像ファイルを保存できます。以下のコード例は、buffer オブジェクトを PNG 画像ファイルとして保存する方法を示しています。

const fs = require('fs');
const path = require('path');

const filename = 'image.png';
const filePath = path.join(__dirname, filename);

fs.writeFile(filePath, buffer, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('画像ファイルを保存しました:', filename);
});

このコード例では、image.png という名前の PNG ファイルをカレントディレクトリに保存します。ファイル名は、必要に応じて変更できます。

完全なコード例

以下のコード例は、Base64 エンコードされた画像をディスクに保存する全体的なプロセスを示しています。

const fs = require('fs');
const path = require('path');
const Buffer = require('buffer').Buffer;

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB

Node.js で Base64 エンコードされた画像をディスクに保存する - サンプルコード

const fs = require('fs');
const path = require('path');
const Buffer = require('buffer').Buffer;

// Base64 エンコードされた画像データ (仮想定)
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00'

// ファイル名 (任意で変更可)
const filename = 'image.png';

// ファイルパス
const filePath = path.join(__dirname, filename);

// Base64 エンコードされたデータをデコード
const buffer = Buffer.from(base64String, 'base64');

// 画像ファイルを保存
fs.writeFile(filePath, buffer, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('画像ファイルを保存しました:', filename);
});

説明:

必要なモジュールをインポートします:
- fs: ファイルシステム操作用モジュール
- path: パス操作用モジュール
- Buffer: Base64 エンコード/デコード用モジュール
Base64 エンコードされた画像データを base64String 変数に格納します。これは、実際のコードでは API レスポンスや HTML タグから取得する必要があります。
保存するファイル名を filename 変数に設定します。
path.join 関数を使用して、ファイルの絶対パスを filePath 変数に格納します。
Buffer.from 関数を使用して、Base64 エンコードされた文字列を buffer オブジェクトに変換します。
fs.writeFile 関数を使用して、buffer オブジェクトを指定したファイルパスに保存します。
- エラーが発生した場合は、err 変数にエラー情報が格納されます。
- エラーがない場合は、コンソールに成功メッセージが出力されます。

実行方法:

このコードを .js ファイル (例: save-image.js) に保存します。
ターミナルで以下のコマンドを実行します。

node save-image.js

このコマンドを実行すると、image.png という名前の PNG ファイルがカレントディレクトリに保存されます。

補足:

このコード例は、基本的な機能のみを示しています。実際の使用状況に合わせて、エラー処理やオプションの追加などを検討する必要があります。
Base64 エンコードされた画像データの取得方法は、ソースによって異なります。必要に応じて、適切な方法で取得してください。

Node.js で Base64 エンコードされた画像をディスクに保存する - その他の方法

sharp モジュールを使用する

sharp は、Node.js 用の画像処理ライブラリで、Base64 エンコードされた画像のデコードと保存を簡単に行うことができます。

const sharp = require('sharp');

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00'

// ファイル名 (任意で変更可)
const filename = 'image.png';

sharp(base64String)
  .png()
  .toFile(filename, (err) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log('画像ファイルを保存しました:', filename);
  });

js-base64 は、Base64 エンコード/デコードを簡単に行うことができる軽量なライブラリです。

const base64 = require('js-base64');
const fs = require('fs');
const path = require('path');

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00'

// ファイル名 (任意で変更可)
const filename = 'image.png';

// ファイルパス
const filePath = path.join(__dirname, filename);

// Base64 エンコードされたデータをデコード
const buffer = base64.decodeBase64(base64String);

// 画像ファイルを保存
fs.writeFile(filePath, buffer, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('画像ファイルを保存しました:', filename);
});

オンラインツールを使用する

簡単な作業であれば、Base64 エンコードされた画像をオンラインでデコードして保存できるツールを使用する方法もあります。ただし、オンラインツールを使用する場合は、画像データのセキュリティに注意する必要があります。

それぞれの方法の比較:

方法	利点	欠点
純正 Node.js モジュール	追加のライブラリインストールが不要	やや複雑なコード
`sharp` モジュール	画像処理機能が豊富	ライブラリのインストールが必要
`js-base64` モジュール	軽量で使いやすい	画像処理機能は限定的
オンラインツール	手軽に使用できる	セキュリティリスク