Base64 Encoder/Decoder (Javascript) for Text/Binary Files

This page provides a Javascript implementation online Base64 encoder and decoder that can be used to convert Text and Binary Data to Base64 format. The Base64 Encode Technique is often used to make binary data (those non-printable) into text-printable characters. It uses a 64 character table

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=

and group every 3 characters of input, e.g. 3 X 8 = 24 bits, and regroup it into 4 characters 4 X 6 = 24 bits. Thus, each new character is from 0 to 63, which is mapped into new characters using this 64-character table.

If the length of the input is not divisible by 3, i.e. that is only 1 or 2 characters at the end of the input, then the following action is performed: Extra bytes are added with value zero so there are 3 bytes, and perform the conversion to base64. Extra '=' are padded into the input so that last group always has 4 base64 digits.

Example:

This page provides a Javascript online web-based Base64 Encoder/Decoder.
will be translated to:

VGhpcyBwYWdlIHByb3ZpZGVzIGEgSmF2YXNjcmlwdCBvbmxpbmUgd2ViLWJhc2VkIEJhc2U2NCBFbmNvZGVyL0RlY29kZXIu

Convert Text to Base64

Base64 makes every 3 characters into 4 Base64 digits! Please visit https://rot47.net/picture-gallery/ which is a fantastic image gallery!

Encode Any File (Binary) to BASE64 via HTML5 Local FileReader

HTML5 provides a local file reader object that allows you to load files locally without sending to the server. Choose a file locally and wait for a few seconds before the browser encodes the binary data into BASE64.

If the file is of type image, then you can inline the images using the following two methods:

Copy to CSS

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

Copy to Image Source

<img src="data:image/png;base64,iVBORw0KGgo=..." />

Pros of Inlining Base64 Images:

1. Reduce the number of HTTP/HTTPS requests
2. Prevent image 404 errors due to invalid directory, permissions etc.

Cons of Inlining Base64 Images:

1. You are increasing the size of images by 133%
2. If images get updated, you have to re-obtain the Base64 code
3. Images cannot be cached, however as in HTML, they are gzipped compressed.

API (Application Programmer Interface)

The Base64 can be easily implemented by modern programming language in many many ways, e.g. using a lookup table. The PHP provides base64_encode and base64_decode. This encoding is designed to make binary data survive transport through transport layers that are not 8-bit clean, such as mail bodies. Base64-encoded data takes about 33% more space than the original data.

The API following has a rate-limit 1 call per second.

https://str.justyy.workers.dev/btoa/?s=HelloBASE64!

It will return JSON-encoded data:

"SGVsbG9CQVNFNjQh"

https://str.justyy.workers.dev/atob/?s=SGVsbG9CQVNFNjQh

It will return JSON-encoded data:

"HelloBASE64!"

If $_GET parameter s is not specified, this API will use the $_POST text instead.

curl -X POST "https://str.justyy.workers.dev/btoa/" -d "HelloBASE64!"

curl -X POST "https://str.justyy.workers.dev/atob/" -d "SGVsbG9CQVNFNjQh!"

Converting Images is made simpler via the following API.

https://helloacm.com/api/image-to-base64/?url=https://justyy.com/YY.png

which will return the base64 string that you can just include in your source code.

Share This Utility

Javascript Download

Use the BASE64 functions in your application easily; base64.js

Link here!

Just paste the HTML code, shown below, onto the site of your choice.

    <a href="https://rot47.net/base64encoder.html" title="Online BASE64 Encoder/Decoder">Online BASE64 Encoder</a>

Plain text example:
Online BASE64 Encoder

Page Edited: