Reactで、画像をBase64のデータURLに変換する方法

// File や Blob の中身を、そのまま Base64 のデータURL（data:<MIMEタイプ>;base64,…）にする
export function fileToDataURL(file: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

import { useState } from 'react';
import type { ChangeEvent } from 'react';
import { fileToDataURL } from './dataUrl';

type Converted = { name: string; size: number; dataUrl: string };

export function App() {
  const [converted, setConverted] = useState<Converted | null>(null);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);

  async function handleFile(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setCopied(false);
    try {
      const dataUrl = await fileToDataURL(file);
      setConverted({ name: file.name, size: file.size, dataUrl });
      setError('');
    } catch {
      setConverted(null);
      setError('ファイルを読み込めませんでした');
    }
  }

  async function handleCopy() {
    if (!converted) return;
    await navigator.clipboard.writeText(converted.dataUrl);
    setCopied(true);
  }

  return (
    <main>
      <input type="file" accept="image/*" aria-label="画像を選ぶ" onChange={handleFile} />
      {error && <p role="alert" className="error">{error}</p>}
      {converted && (
        <>
          <img className="preview" src={converted.dataUrl} alt="選んだ画像のプレビュー" />
          <p className="info">
            {converted.name}：元のファイル {converted.size.toLocaleString()} バイト → データURL {converted.dataUrl.length.toLocaleString()} 文字
          </p>
          <textarea className="output" readOnly rows={4} value={converted.dataUrl} aria-label="データURL" />
          <div className="toolbar">
            <button type="button" onClick={handleCopy}>コピーする</button>
            <span className="copied" aria-live="polite">{copied ? 'コピーしました' : ''}</span>
          </div>
        </>
      )}
    </main>
  );
}

sample.png: sample.png：元のファイル 4,960 バイト → データURL 6,638 文字 | プレビュー 表示できた 240x160 | 欄の文字列が readAsDataURL の結果と同じ: true | コピーした文字列が同じ: true
sample.jpg: sample.jpg：元のファイル 13,486 バイト → データURL 18,007 文字 | プレビュー 表示できた 240x160 | 欄の文字列が readAsDataURL の結果と同じ: true | コピーした文字列が同じ: true
sample.svg: sample.svg：元のファイル 185 バイト → データURL 274 文字 | プレビュー 表示できた 120x80 | 欄の文字列が readAsDataURL の結果と同じ: true | コピーした文字列が同じ: true

sample.png: 元 4960 バイト | 先頭 data:image/png;base64, | データURL 6638 文字（うち Base64 6616 文字、4×ceil(4960/3) = 6616） | 戻したバイト列が元と同じ: true（sha256 1c87496920c16d34 / 1c87496920c16d34）
sample.jpg: 元 13486 バイト | 先頭 data:image/jpeg;base64, | データURL 18007 文字（うち Base64 17984 文字、4×ceil(13486/3) = 17984） | 戻したバイト列が元と同じ: true（sha256 3d58ad7047819064 / 3d58ad7047819064）
sample.svg: 元 185 バイト | 先頭 data:image/svg+xml;base64, | データURL 274 文字（うち Base64 248 文字、4×ceil(185/3) = 248） | 戻したバイト列が元と同じ: true（sha256 439632eb4ffd6039 / 439632eb4ffd6039）

sample.png → toDataURL(): 先頭 data:image/png;base64, | 8370 文字（中のファイル 6261 バイト、元は 4960 バイト） | 元と同じバイト列: false
sample.jpg → toDataURL(): 先頭 data:image/png;base64, | 115486 文字（中のファイル 86597 バイト、元は 13486 バイト） | 元と同じバイト列: false
sample.jpg → toDataURL('image/jpeg', 0.92): 先頭 data:image/jpeg;base64, | 20035 文字（中のファイル 15008 バイト、元は 13486 バイト） | 元と同じバイト列: false

// Uint8Array の toBase64() で、データURLを組み立てる書き方
export async function fileToDataURLWithToBase64(file: Blob): Promise<string> {
  const bytes = new Uint8Array(await file.arrayBuffer());
  return `data:${file.type || 'application/octet-stream'};base64,${bytes.toBase64()}`;
}

sample.png: 同じ文字列: true（6638 文字）
sample.jpg: 同じ文字列: true（18007 文字）
sample.svg: 同じ文字列: true（274 文字）
sample.png（MIME タイプなし）: 同じ文字列: true（6653 文字）

src/toBase64.ts(4,74): error TS2339: Property 'toBase64' does not exist on type 'Uint8Array<ArrayBuffer>'.

// 画像の URL から読み込んで、データURLにする（別のオリジンの画像は、CORS で許可されていないと読めない）
export async function urlToDataURL(url: string): Promise<string> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`読み込めませんでした（${res.status}）`);
  return fileToDataURL(await res.blob());
}

/sample.png: 成功 6638 文字
http://127.0.0.1:5174/sample.png: 失敗 TypeError: Failed to fetch
http://127.0.0.1:5175/sample.png: 成功 6638 文字
/missing.png: 失敗 Error: 読み込めませんでした（404）