Why am I getting the updated json field converted info ZoneAwarePromise data - json

Question

I am trying to get an "image URL field" convert to a base64 blob data, however the updated field console log data is showing as ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
this.http.get(this.api).subscribe(data => {
this.mainContact = data;
for (var a = 0; a < this.mainContact.length; a++) {
for (var j = 0; j < this.mainContact[a].acf.project_gallery.length; j++) {
var mainUrl = 'https://cdnwebapp.azureedge.net'+this.mainContact[a].acf.project_gallery[j].url;
//Below updates the all field value to the converted blob
this.mainContact[a].acf.project_gallery[j].url = this.convertToDataURLviaCanvas(mainUrl, "image/jpeg", 1)
.then(base64Img => {
return base64Img;
// console.log(base64Img); *As Expected blob*
})
//console.log(this.mainContact[a].acf.project_gallery[j].url) * The update field data console log is showing as ZoneAwarePromise
}
}
});
convertToDataURLviaCanvas(url, outputFormat, osize){
return new Promise( (resolve, reject) => {
let img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
let canvas = <HTMLCanvasElement> document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
dataURL;
canvas.height = 959;
canvas.width = 1365;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat, osize);
//callback(dataURL);
canvas = null;
resolve(dataURL);
};
img.src = url;
});
}

Answer 1

I think you have to assign in on the .then.
Try:
this.convertToDataURLviaCanvas(mainUrl, "image/jpeg", 1)
.then(base64Img => {
this.mainContact[a].acf.project_gallery[j].url = base64img
console.log(base64Img);
console.log(this.mainContact[a].acf.project_gallery[j].url);
})