我有一个Angular 4应用程序,我正在阅读一个图像&尝试将base64字符串传递给另一个变量 – 但是由于这种异步性质我遇到了问题 – image.src是空的,因此值已正确传递给图像对象？
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject,this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});
image.src = base64; // how to get base64 string into image.src var here??
let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
}
/**
* get base64 string from supplied file object
*/
public getBase64(file,onLoadCallback) {
return new Promise(function(resolve,reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
public processImage() {
}
由于代码本质上是异步的,因此如果要使用它,则必须等待结果.在您的情况下,您将不得不等到您的承诺得到解决.所以你的代码应该是这样的：
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(this.fileObject,this.processImage);
promise.then(function(base64: string) {
console.log(base64);
image.src = base64;
let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
});
}
我改变了以下事情：
>我在Promback回调中移动了ReactUI实例化的代码
>指定类型的base64参数作为字符串
>修复了getBase64函数调用中的拼写错误,从this.processImage()到this.processImage,因此传递回调函数而不是processImage函数的结果.
我希望这有帮助！
