IMAGE TO Base64

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const dropZone = document.getElementById('drop-zone');
  const fileInput = document.getElementById('file-input');

  dropZone.addEventListener('click', () => fileInput.click());
  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('active'); });
  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('active'));
  dropZone.addEventListener('drop', e => {
    e.preventDefault(); dropZone.classList.remove('active');
    if (e.dataTransfer.files.length) processFile(e.dataTransfer.files[0]);
  });
  fileInput.addEventListener('change', () => { if (fileInput.files.length) processFile(fileInput.files[0]); });

  function formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
  }

  function processFile(file) {
    if (!file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      const dataUri = e.target.result;
      const base64 = dataUri.split(',')[1];

      document.getElementById('preview').classList.remove('hidden');
      document.getElementById('preview-img').src = dataUri;
      document.getElementById('preview-info').innerHTML = `
        <strong>${file.name}</strong><br>
        ${file.type} · ${formatSize(file.size)}<br>
        ${base64.length.toLocaleString()} base64 chars
      `;

      document.getElementById('results-card').classList.remove('hidden');
      document.getElementById('val-orig').textContent = formatSize(file.size);
      document.getElementById('val-encoded').textContent = formatSize(base64.length);
      document.getElementById('val-format').textContent = file.type.split('/')[1].toUpperCase();
      document.getElementById('out-datauri').textContent = dataUri;
      document.getElementById('out-base64').textContent = base64;
    };
    reader.readAsDataURL(file);
  }

  function copyText(id, btn) {
    navigator.clipboard.writeText(document.getElementById(id).textContent);
    btn.textContent = 'Copied'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1500);
  }