How to convert an image to Base64 in JavaScript

How to convert an image to Base64 in JavaScript:

In this post, I will show you different ways to convert an image to Base64 in JavaScript. Base64 is an encoding scheme that is used for binary data. This is a popular encoding scheme and used to transmit binary data across different channels. Base64 is widely used in email attachments.

The following examples will show two different ways to find the Base64 value. The first example will find the value of a local file and the second example will find it from a remote URL.

In both of these examples, we will use the FileReader API. This is a File API and we can use it to read the content of a file asynchronously. We will use the HTML component <input type="file"> to allow the user to pick the file from the system.

Example 1: Find the Base64 value of a local image:

In this example, we are using an input component that will allow the user to pick an image. It will calculate the Base64 of that image and show it with an alert.

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    function findBase64(e) {
      const file = e.files[0];
      const fileReader = new FileReader();
      fileReader.onloadend = function () {
        alert(fileReader.result.split(',')[1]);
      };
      fileReader.readAsDataURL(file);
    }
  </script>
</head>

<body>
  <p>Select an Image:</p>
  <input type="file" onchange="findBase64(this)" />
</body>

</html>

If you save the above code snippet in a html file and open that file in any web browser, it will show one input field as below:

You can click on the choose file button and select an image.

It will:

trigger the findbase64 method.
It will create one FileReader object.
It will call the readAsDataURL method. The selected file is passed to this method.
This method will read the content of the file and onloadend function will be called. We need to split the result to get the required Base64 value from the DataURL.

It will show the Base64 value with an alert.

Example 2: Find the Base64 value from a remote URL:

With this example, we will get the Base64 value of an image from any given URL. We will add an input component to get the URL from the user.

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    function findBase64() {
      const url = document.getElementById('idInput').value;
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          var fileReader = new FileReader();
          fileReader.onloadend = function () {
            alert(fileReader.result.split(',')[1]);
          };
          fileReader.readAsDataURL(blob);
        });

    }
  </script>
</head>

<body>
  <p>Enter the URL of the image:</p>
  <input id="idInput" />
  <button onclick="findBase64()">Find Base64</button>
</body>

</html>

This will add one input field and one button. You can enter the URL of the image in that field and click on the button to find the Base64 result. It is using a similar approach to find the Base64 value. It uses the fetch api call to get the blob object from the url. We can pass a blob to the readAsDataURL method of a FileReader object. It works similar to the previous example.

Reference:

FileReader reference

CodeVsColor

How to convert an image to Base64 in JavaScript