base64画像のディスク保存 (Node.js)

「base64エンコードされた画像をディスクに保存する方法」の日本語解説 (Node.js、image)

前提

• image
  画像処理ライブラリ (例えば、sharp や jimp).
• Node.js
  JavaScriptランタイム環境。
• base64
  画像データを文字列形式で表現するためのエンコード方式。

手順

1. 画像データの取得
   

   • APIやデータベースからbase64エンコードされた画像データを取得します。
   • 例えば、HTTPリクエストで取得する場合:

   const https = require('https');
   
   https.get('https://example.com/image.jpg', (res) => {
     let data = '';
     res.on('data', (chunk) => {
       data += chunk;
     });
     res.on('end', () => {
       // base64エンコードされた画像データを取得
       const base64Image = data;
       // 続くステップで処理
     });
   });
   

2. base64データをバイナリデータに変換
   

   • Bufferオブジェクトを使用して、base64データをバイナリデータに変換します。

   const buffer = Buffer.from(base64Image, 'base64');
   

3. 画像データを保存
   

   • fsモジュールを使用して、バイナリデータをファイルに書き込みます。

   const fs = require('fs');
   
   fs.writeFile('output.jpg', buffer, (err) => {
     if (err) throw err;
     console.log('Image saved!');
   });
   

例 (sharpライブラリを使用)

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

// base64エンコードされた画像データを取得
const base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/';

// base64データをバイナリデータに変換
const buffer = Buffer.from(base64Image, 'base64');

// 画像データを処理 (例: サイズ変更)
sharp(buffer)
  .resize(200, 200)
  .toFile('output.jpg', (err) => {
    if (err) throw err;
    console.log('Image saved!');
  });

注意

• 画像処理ライブラリを使用する場合、そのライブラリのドキュメントを参照して具体的な使用方法を確認してください。
• fs.writeFileは非同期操作なので、エラー処理やコールバック関数を適切に使用してください。
• 画像フォーマット (JPEG, PNGなど) に応じて、適切なエンコーディング方式を使用してください。

「base64画像のディスク保存 (Node.js)」のコード解説

コード例

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

// HTTPリクエストでbase64エンコードされた画像データを取得
https.get('https://example.com/image.jpg', (res) => {
  let data = '';
  res.on('data', (chunk) => {
    data += chunk;
  });
  res.on('end', () => {
    // base64エンコードされた画像データを取得
    const base64Image = data;

    // base64データをバイナリデータに変換
    const buffer = Buffer.from(base64Image, 'base64');

    // バイナリデータをファイルに保存
    fs.writeFile('output.jpg', buffer, (err) => {
      if (err) throw err;
      console.log('Image saved!');
    });
  });
});

コード解説

1. HTTPリクエスト
   

   • https.getメソッドを使用して、指定されたURLから画像データをフェッチします。
   • res.on('data')とres.on('end')イベントを使用して、受信したデータをバッファに蓄積し、最終的にbase64エンコードされた画像データを取得します。

2. base64データの変換
   

   • Buffer.fromメソッドを使用して、base64エンコードされた画像データをバイナリデータに変換します。
   • 第2引数として'base64'を指定することで、base64デコードを行います。

3. ファイル保存
   

   • fs.writeFileメソッドを使用して、バイナリデータを指定されたファイル名で保存します。
   • エラーが発生した場合には、エラーを投げます。

ポイント

• fs.writeFileも非同期操作なので、エラー処理を適切に行う必要があります。
• Buffer.fromは、base64データだけでなく、他のエンコーディング方式のデータも変換できます。
• https.getは非同期操作なので、コールバック関数を使用して処理を完了後に実行するコードを指定します。

画像処理ライブラリを使用:

• jimp
  画像処理とフィルタリングのためのライブラリ。
• sharp
  高性能な画像処理ライブラリ。

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

// base64エンコードされた画像データを取得
const base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/';

// base64データをバイナリデータに変換
const buffer = Buffer.from(base64Image, 'base64');

// 画像データを処理 (例: サイズ変更)
sharp(buffer)
  .resize(200, 200)
  .toFile('output.jpg', (err) => {
    if (err) throw err;
    console.log('Image saved!');
  });

HTTPリクエストのストリーム処理:

• http.getやhttps.getの代わりに、http.requestやhttps.requestを使用して、ストリーム処理を行う。

例

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

http.get('https://example.com/image.jpg', (res) => {
  const writeStream = fs.createWriteStream('output.jpg');
  res.pipe(writeStream);
  writeStream.on('finish', () => {
    console.log('Image saved!');
  });
});

async/awaitを使用:

• 非同期処理をより読みやすく管理するために、async/awaitを使用する。

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

async function saveImage(url) {
  try {
    const response = await https.get(url);
    const buffer = await new Promise((resolve, reject) => {
      const chunks = [];
      response.on('data', (chunk) => chunks.push(chunk));
      response.on('end', () => resolve(Buffer.concat(chunks)));
      response.on('error', rej   ect);
    });
    await fs.promises.writeFile('output.jpg', buffer);
    console.log('Image saved!');
  } catch (error) {
    console.error(error);
  }
}

saveImage('https://example.com/image.jpg');

選択基準

• コードの読みやすさ
  async/awaitを使用すると、非同期処理をより読みやすく管理できる。
• ストリーム処理が必要か
  大量の画像データを処理する場合は、ストリーム処理を使用する。
• 画像処理が必要か
  画像処理が必要な場合は、画像処理ライブラリを使用する。