How to Get Base64 String From Image an Image JavaScript

In one of the recent requirements, needed to get the Base64 string from the Image using JavaScript.  Though it seems a simple one, there are a couple of settings which wanted to share with the community.

It doesn’t require much explanation.  The below code snippets are self-explanatory.

<div class="container" style="padding: 8px;">

                <img id="1" crossOrigin="anonymous" class="myimages" src="https://source.unsplash.com/600x600/?sig=1" alt="1.jpg"/>
                <img id="2" crossOrigin="anonymous" class="myimages" src="https://source.unsplash.com/600x800/?sig=12" alt="1.jpg"/>
                <img id="3" crossOrigin="anonymous" class="myimages" src="https://source.unsplash.com/800x600/?sig=71" alt="1.jpg"/>
                <img id="4" crossOrigin="anonymous" class="myimages" src="https://source.unsplash.com/600x600/?sig=40" alt="1.jpg"/>
                <img id="5" crossOrigin="anonymous" class="myimages" src="https://source.unsplash.com/600x600/?sig=32" alt="1.jpg"/>

            </div>

When the Office is Ready, we are assigning a Click Event for the Images.

Office.onReady(function () {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
             
            $('.myimages').click(insertImage);
        });
    });

And the Function getBase64String is as below.

function getBase64String(id) {

        console.log(id);

        var img = document.getElementById($(id)[0].currentTarget.id);

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        ctx.drawImage(img, 0, 0);

        var base64string = canvas.toDataURL().split(',')[1];
return base64string;
}

Hope this is simple and useful for someone who looks for same kind of requirement.

Happy Coding,

Sathish Nadarajan.