DEV Community

Cover image for Base64 Data and Its Application
Karan Rathod
Karan Rathod

Posted on

Base64 Data and Its Application

Base64 encoding is a technique used to convert binary data, like images, into a text string using a set of 64 characters. This makes it easier to transmit and store data that might otherwise need special handling. For example, embedding images directly into HTML or CSS files using Base64 reduces the number of server requests, speeding up webpage loading times.

Converting Files to Base64

Before diving into the complexities of what to do with Base64 data, it's essential to understand how a file can be converted to this format. The conversion process is quite simple. It involves reading the file's binary data and encoding it into a string of letters, digits, and two symbols. For instance, when a file is uploaded to a website, JavaScript can read the file's content and convert it to Base64 using the FileReader API. This encoded string can then be used directly in web pages or sent to a server.

Below is a simple JavaScript example that demonstrates how to convert an uploaded file to Base64 using the FileReader API:

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(evt) {
            const base64String = evt.target.result;
            console.log('Base64 representation of the uploaded file:', base64String);
            // Here you can use the Base64 string, for example, to display the image
            // or send it to a server.
        };
        reader.readAsDataURL(file);
    } else {
        console.log('No file selected!');
    }
});

Enter fullscreen mode Exit fullscreen mode

Utilizing Base64 Data

While accessing the Base64 data of an image is quite easy, the difficult part is figuring out how to utilize this data. Let's look at it from the context of creating a web-based image conversion tool, which can take Base64 data as input and allow users to convert them into different formats or compress them, all within the browser. To implement this functionality, let's take a look at this simple function that can handle the entire process of image conversion, renaming, and quality reduction at the same time using the base64 data.

Here's the function followed by its explanation:

function convertImageUsingBase64(base64Data, filename, quality, outputFormat) {

    // Validate the output format
    const validFormats = ['image/png', 'image/jpeg', 'image/webp'];
    if (!validFormats.includes(outputFormat)) {
        console.error(`Invalid output format. Acceptable formats are: ${validFormats.join(', ')}`);
        return;
    }

    // Decode the base64 string to a Blob object
    const base64String = base64Data.split(';base64,').pop();
    const byteCharacters = atob(base64String);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], {type: outputFormat});
    const url = URL.createObjectURL(blob);

    // Create an Image object to load the blob URL
    const img = new Image();
    img.onload = function() {
        // Create a canvas with the same dimensions as the image
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        const ctx = canvas.getContext('2d');

        // Draw the image at its natural size
        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

        // Convert the canvas content to the specified format with quality
        const compressedDataURL = canvas.toDataURL(outputFormat, quality);

        // Create a temporary link to initiate the download
        const link = document.createElement('a');
        link.href = compressedDataURL;
        link.download = filename + '.' + outputFormat.split('/')[1]; // Append file extension based on format
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // Clean up by revoking the blob URL to free memory
        URL.revokeObjectURL(url);
    };
    // Set the source of the image to the blob URL
    img.src = url;
}
Enter fullscreen mode Exit fullscreen mode

Here's a step-by-step explanation of the above function:

  1. Validate Output Format: The convertImageUsingBase64 function first ensures the specified output format is one of the supported types (PNG, JPEG, WEBP).

  2. Decode Base64 to Blob: It decodes the Base64 string back to binary form and wraps this binary data in a Blob object. Blobs efficiently handle large amounts of binary data, making them suitable for image processing.

  3. Create and Load Image: A new Image object is created to load the image from the Blob URL. Simultaneously, a canvas element is prepared, matching the image's dimensions, to serve as a workspace for the image.

  4. Draw and Convert Image: The canvas draws the image at its original size, then converts the canvas content to the desired output format, adjusting the quality as specified. This step is crucial for changing the image format and compressing it without needing server-side processing.

  5. Initiate Download: Finally, the function creates a temporary link element to enable downloading the converted image. It programmatically triggers the download and then cleans up by removing the link and revoking the Blob URL, efficiently managing memory.

This modular function can be easily used in low-code tools or applications that are built using traditional code.

Conclusion

Base64 data conversion opens up a variety of possibilities for handling and manipulating files directly in the browser. The convertImageUsingBase64 function provides a clear example of how to leverage this data for practical applications like image conversion, showcasing the versatility and power of the modern web browser.

If you want to see this function in action, checkout this guide in which I am building a complete image conversion tool using ToolJet.

Top comments (0)