How to Base64 encode in JavaScript? (2 Easy Methods)

Do you want to know how to Base64 encode in JavaScript?

In today’s blog post, I’ll share two easy methods for encoding and decoding a Base64 code.

If you are building a website or web-based application that requires saving the data in Base64 format, then you can follow today’s method.

Method 1: TextEncoder / TextDecoder

Encode Text

If you need to convert Unicode characters, method 1 is the best option. In this method, I’ll show you how to encode and decode both strings and Unicode characters.

To achieve this, I’ll first create a JavaScript function to make it reusable and easy to call multiple times.

Simply create a function with a parameter of any name. Since I’ll be passing a string, I’ll name it “text”.

function base64Encode(text) {
    
}

Now, I’ll use the TextEncoder method to convert all strings into a Uint8Array string and store it in a variable for easy access.

function base64Encode(text) {
    const encoder = new TextEncoder();
}

Now, I’ll use the encode method on the encoder variable to convert it into a different format.

We convert it for safe storage because some APIs (like WebSockets, Fetch, or File APIs) require binary data instead of plain strings, so I’m using the encode method on the encoder variable.

function base64Encode(text) {
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
}

Finally, I’ll return the final result, allowing you to access and use the Base64-encoded output as needed.

function base64Encode(text) {
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
    return btoa(String.fromCharCode(...data));
}

If I now log the result to the console, you’ll see that I’ve successfully encoded the string into a Base64 value.

const encoded = base64Encode("Hello, 你好 🌍");
console.log(encoded); // SGVsbG8sIOS9oOWlvSDwn4yN

Decode Text

To decode a string that we encoded using the encode method, I will do everything in reverse with bit of changes.

First, let’s create a function and pass a parameter just like below.

function base64Decode(base64) {
  
}

Now use the atob method and pass the parameter in it.

The atob() is a built-in JavaScript function that will decode a Base64-encoded string back into its original text format.

function base64Decode(base64) {
    const decoded = atob(base64);
}

Now I will use the TextDecoder method to convert the UTF-8 byte array back into a proper string.

function base64Decode(base64) {
    const decoded = atob(base64);
    const decoder = new TextDecoder();
}

In the final step, I’ll convert the binary string into a Uint8Array of UTF-8 bytes using: Uint8Array.from(decoded, c => c.charCodeAt(0)).

function base64Decode(base64) {
    const decoded = atob(base64);
    const decoder = new TextDecoder();
    return decoder.decode(Uint8Array.from(decoded, c => c.charCodeAt(0)));
}

If I now log the result to the console, you’ll see that I’ve successfully decoded the Base64 value into a string into.

const decoded = base64Decode(encoded);
console.log("SGVsbG8sIOS9oOWlvSDwn4yN");

Also see: JavaScript Push Object to Array (5 Simple Methods)

Method 2: btoa() / atob()

If you’re looking for a simple method, you can use btoa() and atob().

With this method, you can convert all strings into a Base64 value, but keep in mind that it doesn’t support Unicode characters.

Encode Text

So, if you only need to convert a normal string to a Base64 value, you can use this simple method.

Use the btoa method and provide a string as an argument.

const base64Encoded = btoa("Hello, World!");

If I log the variable to the console, the converted value will be displayed.

console.log(base64Encoded); // Outputs: "SGVsbG8sIFdvcmxkIQ=="

Decode Text

Use the atob method to convert a Base64 value back to a normal string.

const decodedText = atob(base64Encoded);

Now, if I log the variable to the console, the decoded string will be displayed.

console.log(decodedText); // Outputs: "Hello, World!"

Common Use Cases of Base64 Encoding and Decoding

If you’re looking to enhance your project using Base64 encoding and decoding, here are some examples of where it can be applied:

1. Data Transmission

One common use case is encoding binary data (such as images or files) into a text format for secure transmission over text-based protocols like email (MIME) and JSON.

2. Storing Binary Data in Databases

To prevent compatibility issues, you can store images, PDFs, or other binary files in text fields using Base64 encoding.

3. Embedding Images in HTML/CSS

You can also encode images as Base64 strings for direct embedding in web pages, minimizing HTTP requests.

4. Basic Authentication

Encodes usernames and passwords in HTTP headers, though it should be combined with other security measures for protection.

5. URL Encoding

By using Base64 encoding, you can prevent special characters from breaking URLs.

6. Cryptography & Hashing

Encodes cryptographic keys and certificates to ensure secure transmission.

Conslution

The TextEncoder / TextDecoder and btoa() / atob() are 2 simple methods that you can use to encode and decode a base64 value.

You might also be interested in How to Call Two Functions onClick in JavaScript? (3 Easy Steps) or How to Call a JavaScript Function on Button Click in HTML? (5 Simple Methods).

Subscribe to our SingleSyntax YouTube channel for amazing coding-related videos!