This content originally appeared on DEV Community and was authored by Hargunbeer Singh
Introduction
Base64 is a binary to text encoding algorithm. It converts ASCII to a base64 representation.
Process of conversion
We know that a UTF-8 letter consists of 8 bits. Base64 converts the provided string into binary representation and then it removes the last two binary digits from the binary representation of each UTF-8 letter from the provided string. After that, each letter is represented with 6 bits. Remember, the total number of the bits of the whole string should stay the same, like if a string contains 6 ASCII values, corresponding to 8*6 = 48 bits, base64 will convert the binary values into 8 groups of 6 bits.
Then the base64 conversion chart is used to convert the 6-bit groups into utf-8 characters, then another chart is used to convert the corresponding ascii value into the original ascii value.
Also, when using base64 on images, we need to use Buffer to convert the base64 string into binary representation of the image.
string => binary => binary in the groups of 6 bits => base64 ascii string => original string
Where is it used
- It is used to store and transfer content on media which only support ASCII.
- It is used to ensure that the data remains intact without any modification in the transfer.
- It is also used in sending emails.
- It is used to encode binary data so it can be included in a url
Examples
- Suppose you want to send an image over a medium that only supports ASCII, you will have to convert it to ASCII using base64 and then send it.
Encoded size increase
When you encrypt a string using base64, the encoded string would be larger than the actual string. This is because a base64 character is represented by 6 bits, whereas a normal character is represented by 8 bits, thus increasing the number of letters in the base64 string, hence increasing the size of the string. When you use base64 on a string, the size of the string is AT LEAST increased by 133%
Unicode Problem
The DOM strings are 16-bit(UTF-16) encoded strings, which pose a problem for base64 as it only supports 8-bit strings(UTF-8). You can solve this problem by converting the string to UTF-8 and there are other methods to do the same.
The code for overcoming this problem by converting the string to UTF-8 is as follows:
function utf16_To_utf8(str) {
let utf8 = unescape(encodeURIComponent(str));
return utf8;
}
btoa(utf16_To_utf8("pog"));)
Demonstration
A working demonstration of base64 algorithm in a real life scenario in which we transfer an image from a source to its destination by using base64 because we can only transfer ascii data over the medium of transfer. The below demonstration is used is of converting a .jpg file to .png file.
const fs = require('fs');
const base64 = fs.readFileSync('./original.jpg', 'base64');
// convert the binary text in the image file to a base64 string
const buffer = Buffer.from(base64, 'base64');
// generate a base64 buffer of the base64 string, a buffer of the base64 string is required to convert the string back to graphics
fs.writeFileSync('new.jpg', buffer);
// write the buffer into a file
fs.writeFileSync('new.png', buffer);
// you can even convert a jpg into png using this technique
// the process
// image => binary => base64 string => buffer => image
This content originally appeared on DEV Community and was authored by Hargunbeer Singh
Hargunbeer Singh | Sciencx (2021-08-14T10:08:30+00:00) Base64 Explained. Retrieved from https://www.scien.cx/2021/08/14/base64-explained/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.