Converting a string to Base64 manually

As a web developer, you must have heard or even used Base64 encodings. Generally we convert some texts or urls to Base64 encoded string. To do this either, we use programming language's methods or we use some third party tools.

In this tutorial we are going to learn how we can encode any text into Base64 manually.

Lets say, we want to encode a text "hi" in base64 binary encoding. Why I am saying it as binary, because base64 encoding is one of the binary representations.

Step 1: Text To ASCII ( text is "hi")

First, each character in the string is converted to its ASCII representation, For example:

h: 104       i: 105     

Step 2: Convert each ASCII character to 8bit binary

01101000 01101001

Step 3: Split these binary numbers into group of 6 bits.

011010 000110 1001

Step 4: Padding(if required)

If you notice the least significant number doesn't have 6 bits, then add 0 (zeroes) at the end to make it 6bits

011010 000110 100100

Just remember one thing here,
if we add two zeroes then we will be using "=" at the end of base64 string
if we will add 4 zeroes then we will be using "==" at the end of base64 string

Step 5 Convert it to Decimal

26 6 36

Step 6: Use Base64 Table to find out corresponding character encoding

Base64 Table - it contains 64 characters

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

   Value Encoding  Value Encoding  Value Encoding  Value Encoding
         0 A            17 R            34 i            51 z
         1 B            18 S            35 j            52 0
         2 C            19 T            36 k            53 1
         3 D            20 U            37 l            54 2
         4 E            21 V            38 m            55 3
         5 F            22 W            39 n            56 4
         6 G            23 X            40 o            57 5
         7 H            24 Y            41 p            58 6
         8 I            25 Z            42 q            59 7
         9 J            26 a            43 r            60 8
        10 K            27 b            44 s            61 9
        11 L            28 c            45 t            62 - (minus)
        12 M            29 d            46 u            63 _
        13 N            30 e            47 v           (underline)
        14 O            31 f            48 w
        15 P            32 g            49 x
        16 Q            33 h            50 y         (pad) =

So,
26 -> a
6 -> G
36 -> k

aGk

Step 7 - Now add padding ( we added two zeroes, so we will use one equal(=) sign.

You can also verify this with JavaScript method
btoa("hi") . It will also print same.