One of the JIMP library's many features is the ability to create a Base 64 string from an image. This has various uses (some nefarious...) but in this post I will demonstrate embedding a Base 64 encoded graphic as an image source in an HTML document. This is useful for small images such as logos or button graphics, and while I am using HTML the Base 64 string can also be used in CSS.

Base 10 uses 0-9, base 16 (hexadecimal) uses 0-9 plus A-F, and base 64 uses the 26 upper case letters, 26 lower case letters, numbers 0-9 and the plus and forward slash characters, as well as the equals sign for padding. (There are also a few other less common standards.) Therefore any code converting a file, stream or buffer to Base 64 will provide a string containing only these characters which can be safely transmitted using any protocol.

For this project I will write a pair of simple functions which open an image file, obtain its Base 64 encoding, and then insert it into an HTML document.

The source code can be downloaded as a ZIP or cloned from the Github repository from the links below.

Source Code Links

ZIP File
GitHub

The full documentation for JIMP is https://www.npmjs.com/package/jimp.

This is the source code.

base64image.js

openLogo();

function openLogo()
{
    const Jimp = require("jimp");

    Jimp.read("codedrome.png")
        .then(image =>
        {
            image.getBase64Async(Jimp.AUTO)
            .then(base64 =>
            {
                base64ToPage(base64);
            })
            .catch(err =>
            {
                console.error(err);
            });
        })
        .catch(err =>
        {
            console.error(err);
        });
}

function base64ToPage(base64)
{
    const fs = require("fs");

    let file = fs.readFile("base64image.htm", function(err, data)
    {
        if(err)
        {
            console.error(err);
        }
        else
        {
            let html = data.toString('utf8');

            html = html.replace("{{logo}}", base64);

            fs.writeFile("base64image.htm", html, function (err)
            {
                if (err)
                {
                    console.error(err);
                }
                else
                {
                    console.log('Saved!');
                }
            });
        }
    });
}

In the openLogo function we read an image file (this is included with the source code) and then call getBase64Async with a MIME type of Jimp.AUTO to keep the file type of the original image. The resulting Base 64 string is then passed to base64ToPage.

The base64ToPage function opens an existing HTML file, replaces {{logo}} with the Base 64 string and then saves the file. This is a very crude approximation of what templating engines such as Mustache and Handlebars carry out, and is just a quick 'n' dirty way of getting a Base 64 image into a web page rather than being production quality code.

Now let's run the code.

Run

node base64image.js

If you open base64image.htm in your browser you will see a page containing this logo.