Working with Data URIs in JavaScript

JavaScript Data URI APIs

JavaScript provides several native APIs for working with data URIs: FileReader for generating them from files, Canvas for creating them from graphics, and the Fetch API for converting between data URIs and Blobs.

Generating Data URIs from Files

function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage with file input
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const dataUri = await fileToDataUri(e.target.files[0]);
  console.log(dataUri); // data:image/png;base64,...
});

Generating Data URIs from Canvas

const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
const ctx = canvas.getContext('2d');

// Draw something
ctx.fillStyle = '#3b82f6';
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = '#ffffff';
ctx.font = '40px sans-serif';
ctx.fillText('Hi', 25, 60);

// Get data URI
const dataUri = canvas.toDataURL('image/png');
// Or with quality for JPEG:
const jpegUri = canvas.toDataURL('image/jpeg', 0.8);

Converting Data URI to Blob

async function dataUriToBlob(dataUri) {
  const response = await fetch(dataUri);
  return response.blob();
}

// Or without fetch:
function dataUriToBlobSync(dataUri) {
  const [header, data] = dataUri.split(',');
  const mime = header.match(/:(.*?);/)[1];
  const binary = atob(data);
  const array = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    array[i] = binary.charCodeAt(i);
  }
  return new Blob([array], { type: mime });
}

Converting Text to Data URI

function textToDataUri(text, mimeType = 'text/plain') {
  const base64 = btoa(unescape(encodeURIComponent(text)));
  return \`data:\${mimeType};base64,\${base64}\`;
}

// For SVG (percent-encoded, often smaller):
function svgToDataUri(svgString) {
  return 'data:image/svg+xml,' + encodeURIComponent(svgString);
}

Downloading Data URIs

function downloadDataUri(dataUri, filename) {
  const link = document.createElement('a');
  link.href = dataUri;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

Framework Integration

In React, Vue, or Angular, data URIs work directly in template bindings:

// React
<img src={dataUri} alt="Dynamic image" />

// Dynamic favicon
useEffect(() => {
  const link = document.querySelector("link[rel='icon']");
  if (link) link.href = dataUri;
}, [dataUri]);