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.

Though it is very late to discuss about the Extension methods, but I feel that before diving into PNP (Patterns and Practices), it is worth to know about the Extension methods and how to write that.

As all of us know, the Extension Methods are similar to the normal methods, but a custom one. i.e., the default classes and the custom classes will have a set of methods. Along with that, if we want to add some more methods, Extension Methods are very useful.

In practical scenario, in the last article, about the console application, we saw the password needs to be converted as a SecureString class. In that demo, I have written that method as an Ordinary method. Now, let us convert the same into Extension Method.

Let me create a new class in the same namespace.

 namespace Console.Office365
 {
     public static class StringExtensionMethods
     {
         public static SecureString ToSecureString(this string Source)
         {
             if (string.IsNullOrWhiteSpace(Source))
                 return null;
             else
             {
                 SecureString Result = new SecureString();
                 foreach (char c in Source.ToCharArray())
                     Result.AppendChar(c);
                 return Result;
             }
         }
     }
 }
 
 

Now, from the Main Console, we can call the method as,

 string password = "***********";
 var secure = password.ToSecureString();
 
 

Like this we can have extension methods for all the default classes and custom classes as well.

Download the Source HERE

Happy Coding,

Sathish Nadarajan.