Get a URL from a SharePoint List item and convert it to base64 using JavaScript

I have a list with 2 columns namely DistributorLogo and BaseURL as shown below.

The Distributor logo column contains an image URL

enter image description here

I am trying to get the image URL from the DistributorLogo column and save the resultant base64 value to the BaseURL Column

Code to get all the list items:

function GetItemId()
    var deferred = $.Deferred();
        url: _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/GetByTitle('DistributorsListUpdated')/Items?$select=ID,EncodedAbsUrl,BaseURL,DistributorLogo,Distributor_x0020_ID",
        method: "GET",
        type: 'get', 
        async: false,       
        headers: {
            "accept": "application/json;odata=verbose",
            "content-Type": "application/json;odata=verbose"
        success: function(result) {         
            $.each(result.d.results, function(index, row){



        error: function(result){               
    }); // Ajax list items
     return deferred.promise();


Update List Item Code

var UpdateListItemUsingItemId = function (Id,dLogo) {
    var deferred = $.Deferred();  
    var _listItem = {
            "__metadata": { 'type': 'SP.Data.DistributorsListUpdatedListItem' },            
            "BaseURL" : distlogo  

        url:_spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/GetByTitle('DistributorsListUpdated')/GetItemById("+ Id +")",       
        method: 'PATCH',
        async: false,
        data: JSON.stringify(_listItem),
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "content-Type": "application/json;odata=verbose",
            "X-Http-Method": "PATCH",
            "If-Match": "*"
        success: function (data) {          
        error: function (err) {
    }); // ajax | POST      
    return deferred.promise();    
}; // updateListItem() | Ends!

Code for base64 conversion

function getBase64Image(dLogo) {

  var canvas = document.createElement("CANVAS");
  var ctx = canvas.getContext("2d");
  ctx.clearRect( 0 , 0 , canvas.width, canvas.height );
  ctx.fillRect(0 , 0 , canvas.width, canvas.height);
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(img, 0, 0);
   var dataURL = canvas.toDataURL("image/jpeg");
   //return dataURL;
   distlogo = dataURL;
   canvas = null;

   img.src = dLogo;


The base64 conversion code works fine when we pass a URL from a textbox control to the function , However fails and returns blank when passed dynamically from the response array.

The working format of the base64 string is


Would really appreciate if anyone could help me fix the issue so that all the URLs in the list could be converted to base64 URL to be used in a PDF.

Please let me know if more details are needed.

Thanks in Advance