为什么我得到更新的json字段转换信息ZonewarePromise数据



我正在尝试将"图像URL字段"转换为base64 blob数据,但更新的字段控制台日志数据显示为ZonewarePromise{__zone_symbol__state:null,__zone_ymbol__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;
});
}

我认为您必须在.then上分配。

尝试:

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);      
})

最新更新