Saving Image from Signature Pad to Database

Question

I am running this ASP.NET MVC / C# code on .NET 4.6. I am making use of Signature Pad in order to allow clients to sign on the web app. I would like to save the signature image as base 64. However, I keep on running into the following error

The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters

This is the JS code:

var signaturePadWrappers = document.querySelectorAll('.signature-pad');

Array.prototype.forEach.call(signaturePadWrappers, function (wrapper) {
var canvas = wrapper.querySelector('canvas');
var clearButton = wrapper.querySelector('.btn-clear-canvas');
var hiddenInput = wrapper.querySelector('input[type="hidden"]');

var signaturePad = new SignaturePad(canvas);

// Read base64 string from hidden input
var base64str = hiddenInput.value;

if (base64str) {
    // Draws signature image from data URL
    signaturePad.fromDataURL('data:image/png;base64,' + base64str);
}

if (signaturePad.isEmpty()) {
    alert("Provide Signature First");
} else {
    $("#MySignature").val(signaturePad.toDataURL('image/png'));
}

if (hiddenInput.disabled) {
    signaturePad.off();
} else {
    signaturePad.onEnd = function () {
        // Returns signature image as data URL and set it to hidden input
        base64str = signaturePad.toDataURL().split(',')[1];
        hiddenInput.value = base64str;
    };

    clearButton.addEventListener('click', function () {
        // Clear the canvas and hidden input
        signaturePad.clear();
        hiddenInput.value = '';
    });
}
});

I had my reference to this Git Hub Site: https://gist.github.com/multinerd/91e42d8ddc43efee430397f46592bef4