How to Base64 Encode a String in JavaScript

Product Support
, ,
#1

How can I use JavaScript base64 encode to convert a string into a Base64 format? I have a PHP script that successfully encodes a PNG image to a Base64 string, but I’m unsure how to perform the same encoding in JavaScript, especially since I’m not familiar with handling binary data.

#2

You can use JavaScript base64 encode functions like btoa() and atob() for encoding and decoding Base64 data.

It’s important to clarify some common misconceptions about these functions:

The btoa() function accepts a string where each character corresponds to an 8-bit byte. If you input a string with characters that cannot be represented in 8 bits, it may cause issues. This won’t be a problem if you’re treating the string as a byte array, but if you’re working with different character sets, you’ll need to encode it first.

The atob() function returns a string where each character also represents an 8-bit byte, meaning its value will range between 0 and 0xff. However, this does not imply that the output is ASCII; it’s typically used for handling binary data rather than text.

#3

If you need to handle binary data like images, you can extend the basic btoa() and atob() functions by using the FileReader API. This is especially useful if you’re working with files, as JavaScript doesn’t natively work with binary data in the same way as PHP.

Here’s how you can use FileReader to encode an image file to Base64:

function encodeImageFileAsURL(element) {
    const file = element.files[0];
    const reader = new FileReader();
    reader.onloadend = function() {
        console.log(reader.result); // Base64 encoded string
    };
    reader.readAsDataURL(file);
}

In this example, reader.readAsDataURL() converts the file to a Base64 string, and reader.onloadend fires once the encoding is complete. You can use this approach for images, PDFs, or any other file type. It’s a more robust solution when working with binary data, compared to just plain btoa() or atob(). Don’t forget to still use javascript base64 encode to ensure you’re sticking to standard JavaScript methods.

#4

If you’re working with UTF-8 strings, especially ones containing non-ASCII characters (like emojis or foreign languages), you need to be cautious when using btoa() directly, as it doesn’t handle multi-byte characters properly.

To safely handle UTF-8 strings, you can combine the TextEncoder API with btoa() to ensure proper encoding. Here’s how you can do it:

function utf8ToBase64(str) {
    const utf8Bytes = new TextEncoder().encode(str);
    let binaryString = '';
    for (let i = 0; i < utf8Bytes.length; i++) {
        binaryString += String.fromCharCode(utf8Bytes[i]);
    }
    return btoa(binaryString);
}

const base64Encoded = utf8ToBase64("Hello, 世界!");
console.log(base64Encoded); // Output: "SGVsbG8sIOS4lueVjA=="

This method encodes the string into UTF-8 bytes first, then uses btoa() to convert it to Base64. It ensures that special characters like ‘世界’ are encoded properly. So, if you ever need to deal with non-ASCII characters, using the TextEncoder approach alongside javascript base64 encode makes your solution more versatile and reliable.