Cách chuyển đổi hình ảnh thành chuỗi Base64 bằng JavaScript

Sử dụng FileReader API kết hợp fetch hoặc XMLHttpRequest để tải ảnh, đọc dưới dạng Data URL (Base64).

Ví dụ hoàn chỉnh (Fetch + FileReader)

<!DOCTYPE html>
<html>
<body>
  <button onclick="convertToBase64()">Chuyển ảnh thành Base64</button>
  <pre id="output" style="white-space: pre-wrap; word-break: break-all;"></pre>
  <script>
    async function convertToBase64() {
      const url = 'https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg';
      try {
        const response = await fetch(url);
        const blob = await response.blob();

        const reader = new FileReader();
        reader.onloadend = function() {
          const base64String = reader.result; // "data:image/jpeg;base64,/9j/4AAQ..."
          document.getElementById('output').textContent = base64String;
          console.log('Độ dài:', base64String.length);
        };
        reader.readAsDataURL(blob);
      } catch (err) {
        console.error('Lỗi:', err);
      }
    }
  </script>
</body>
</html>

Các trường hợp dùng Base64 ảnh

• Nhúng ảnh nhỏ trực tiếp vào HTML/CSS/JSON (giảm HTTP request).
• Lưu ảnh vào localStorage/IndexedDB (chỉ lưu string).
• Gửi ảnh qua WebSocket, Server-Sent Events, hoặc API chỉ nhận JSON.
• Preview ảnh trước khi upload (đọc từ <input type="file">).

Lưu ý hiệu năng

• Base64 lớn hơn nhị phân ~33%.
• Không cache riêng biệt như file ảnh.
• Chỉ dùng cho ảnh nhỏ (icon, avatar, thumbnail < 10KB). Ảnh lớn dùng file + URL.

Đọc từ input file (user chọn file)

document.getElementById('fileInput').addEventListener('change', e => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = () => console.log(reader.result);
    reader.readAsDataURL(file);
  }
});