convertImageToBase64

画像ファイルを Base64 の文字列に変換します。

API

convertImageToBase64

戻り値

引数 説明
Promise<convertImageToBase64Return> 結果のオブジェクトで解決される Promise Promise

convertImageToBase64Return

プロパティ 説明
success 成功したかどうか boolean
data Base64 のデータ string | ArrayBuffer | null
message エラーのメッセージ string

パラメーター

パラメーター 説明 既定値
file 画像のファイルオブジェクト File 必須

使用例

基本的な使い方

import { convertImageToBase64 } from 'ranuts';

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (file) {
    try {
      const result = await convertImageToBase64(file);
      if (result.success) {
        console.log('Base64:', result.data);
        // img の src にそのまま使えます
        document.getElementById('preview').src = result.data;
      }
    } catch (error) {
      console.error('変換に失敗しました:', error);
    }
  }
});

アップロードの前にプレビューする

import { convertImageToBase64 } from 'ranuts';

async function previewImage(file) {
  const result = await convertImageToBase64(file);
  if (result.success) {
    return result.data; // data:image/jpeg;base64,...
  }
  throw new Error('画像の変換に失敗しました');
}

エラーの扱い

import { convertImageToBase64 } from 'ranuts';

try {
  const result = await convertImageToBase64(file);
  if (!result.success) {
    console.error('エラー:', result.message);
  }
} catch (error) {
  console.error('例外:', error);
}

補足

  1. 非同期の処理:Promise を返すので、await.then() で扱ってください。

  2. ファイルの種類:ブラウザーが対応している画像の形式(JPEG、PNG、GIF、WebP など)はすべて扱えます。

  3. データの形:返る data は完全な Data URL の形式(data:image/jpeg;base64,... など)なので、img タグの src にそのまま使えます。

  4. エラーの扱い:変換に失敗すると Promise が reject されるので、捕まえてください。

  5. 使いどころ:画像のプレビュー、アップロード前の処理、ローカルへの保存などでよく使われます。