How to Convert an img src to a Base64 String in JavaScript (No Canvas Needed)

Learn how to convert an image source to a Base64 string in JavaScript without using canvas.
---
Disclaimer/Disclosure: Some of the content was synthetically produced using various Generative AI (artificial intelligence) tools; so, there may be inaccuracies or misleading information present in the video. Please consider this before relying on the content to make any decisions or take any actions etc. If you still have any concerns, please feel free to write them in a comment. Thank you.
---
How to Convert an img src to a Base64 String in JavaScript (No Canvas Needed)

Base64 encoding is a common technique to represent binary data as a text string. When working with images in web development, there are instances when you might need to convert an image's URL (img src) to a Base64 string. This can be useful for a variety of reasons, including embedding an image directly within HTML or CSS.

In this article, we'll explore how to achieve this conversion in JavaScript without using the canvas element.

Why Avoid Canvas?

While the canvas element is a popular method for manipulating and converting images in web development, it comes with certain constraints and might not always be the best fit, especially for larger images or environments where you can't rely on the DOM.

We'll demonstrate an alternative approach using JavaScript's built-in FileReader object to perform this conversion seamlessly.

Step-by-Step Guide

Fetch the Image as Blob

First, you'll want to fetch the image from its URL and obtain it as a Blob. Here's a function to accomplish that:

[[See Video to Reveal this Text or Code Snippet]]

Convert the Blob to a Base64 String

Once you have the image as a Blob, the next step is to convert this Blob to a Base64 string using FileReader:

[[See Video to Reveal this Text or Code Snippet]]

Combine Everything Together

Now, let's tie everything together into a single function that takes an image URL and returns a Base64 string:

[[See Video to Reveal this Text or Code Snippet]]

Usage

Simply call the convertImageToBase64 function with your image URL:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Using FileReader provides a powerful and straightforward way to convert an img src to a Base64 string in JavaScript without requiring the canvas element. This method is efficient and keeps your code clean and maintainable.

By following the steps outlined in this article, you can easily perform this conversion and utilize the Base64 representation of your images for various purposes in web development.