SharePoint Online - Update current user profile picture using JavaScript

I would like to share my recent experience to update current logged-in user profile picture programmatically using SharePoint OOTB REST API service SetMyProfilePicture as shown in below code example,

function setProfilePicture(imageAsArrayBuffer)
{
var output = false;
    var endpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/SetMyProfilePicture";    
    $.when($.ajax({
        url: endpoint,
type: "POST",
data: imageAsArrayBuffer,
processData: false,
headers: {
   "accept": "application/json;odata=verbose",
   "X-RequestDigest": $("#__REQUESTDIGEST").val(),
   "content-length": imageAsArrayBuffer.byteLength
},
success: function (data) {
alert("picture uploaded!");
},
error: function (data) {  
}
    })).done(function(data) {        
    });
    return output;
}

Need to convert the uploaded image to array buffer and provide it to data property of rest api service. Please search my blog to convert uploaded image to array buffer.