angular – 在异步中使用promises时捕获HTML5 FileReader的结果

发布时间：2020-12-17 08:53:49 所属栏目：安全来源：网络整理

导读：我有一个Angular 4应用程序,我正在阅读一个图像尝试将base64字符串传递给另一个变量 – 但是由于这种异步性质我遇到了问题 – image.src是空的,因此值已正确传递给图像对象？ ngAfterViewInit(): void { let image = new Image(); var promise = this.getBas

我有一个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函数的结果.

我希望这有帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!