How can I convert an image to a Base64 string using JavaScript?

General Discussions
1

I need to transform my image into a Base64 string to send it to a server. Is there a built-in image to base64 JavaScript method or library for this? If not, how can I do this conversion myself?

2

Hey! So, if you’re dealing with an image file, like one selected from an <input type="file">, the FileReader API makes this super simple. Here’s how you can convert it into a Base64 string:

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();
  reader.onload = function() {
    const base64String = reader.result;
    console.log(base64String); // This is your Base64 string
  };
  reader.readAsDataURL(file);
});

It’s widely supported and should fit into most upload workflows. Easy, right?

3

I’ve run into this issue before, and if your image is already on the page or accessible via a URL, you can convert it to a Base64 string using a <canvas> like this:

function toBase64(imgUrl, callback) {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // Needed for cross-origin images
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
  };
  img.src = imgUrl;
}

// Example usage:
toBase64('https://example.com/image.png', base64 => {
  console.log(base64);
});

This approach is super helpful when dealing with existing images, either from the page or external sources, and you need them in Base64 format for things like uploading, saving, or embedding directly in HTML or CSS.

4

Just to add on from my experience there are also lightweight libraries like base64-img that make this process even simpler—especially in Node.js environments.

Example using base64-img (Node.js):

const base64Img = require('base64-img');

base64Img.base64('path/to/image.png', (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data); // Base64 string
  }
});

This can be really helpful in backend workflows or scripts. For browser environments, it might be a bit overkill, but if your project already uses similar utilities, it’s a convenient option to have.

Happy to help :slight_smile: