Encoding uploaded images as Base64 strings simplifies form submissions by allowing binary files to be transmitted alongside standadr text fields. The following implementation demonstrates how to capture a file selection, process it using the FileReader API, and render the result.

File Input to Base64 Conversion

Begin by defining a file input element restricted to common image formats, along with an image tag for previewing the encoded output.

<div>
  <input type="file" id="imageUploader" accept="image/gif, image/jpeg, image/png" />
</div>
<img id="previewTarget" src="" alt="Encoded image preview" />

Attach an event listener to monitor file selection. When a user picks an image, the File object is extarcted from the event payload. The FileReader instance then asynchronously reads the binary data and converts it into a Data URL.

document.getElementById('imageUploader').addEventListener('change', function(event) {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return;

  console.log('File object:', selectedFile);
  console.log('Browser fake path:', event.target.value);

  const fileReader = new FileReader();

  fileReader.onload = function(loadEvent) {
    const base64Data = loadEvent.target.result;
    console.log('Generated Base64 string:', base64Data);

    const previewElement = document.getElementById('previewTarget');
    previewElement.src = base64Data;
  };

  fileReader.readAsDataURL(selectedFile);
});

Converting Existing DOM Images to Base64

For images already present in the document, direct file access is unavailable. Instead, the visual representation can be captured and serialized using a canvas element. The html2canvas library streamlines this process by rasterizing DOM nodes.

<img id="sourceImage" src="/assets/sample.jpg" alt="Source" style="width: 150px; height: 150px;" />
<button id="convertTrigger">Rasterize Image to Base64</button>

<script src="/lib/html2canvas.min.js"></script>
<script>
  document.getElementById('convertTrigger').addEventListener('click', async () => {
    const targetNode = document.getElementById('sourceImage');

    try {
      const renderedCanvas = await html2canvas(targetNode);
      console.log('Canvas element:', renderedCanvas);

      const canvasDataUrl = renderedCanvas.toDataURL('image/png');
      console.log('Canvas Base64 output:', canvasDataUrl);

      document.body.appendChild(renderedCanvas);
    } catch (error) {
      console.error('Rasterization failed:', error);
    }
  });
</script>

The canvas-based approach functions as a visual screenshot of the rendered element rather than a direct read of the original source file. Consequently, CSS transformations, cross-origin policies, and browser rendering differences will influence the final Base64 output. This method is optimal for UI capture scenarios rather than lossless file encoding.