javascript - Angular如何调用异步函数并在结果返回后继续

Question

我有以下代码：

private dispaly(file){
     let srcEncoded = this.resizeImg(file);
}

private resizeImg(file){
        if(file && file.type && file.type.includes("image")){
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                const imgElement = document.createElement("img");
                imgElement.src = e.target.result as string;
                imgElement.onload = (e) =>{
                    const canvas = document.createElement("canvas");
                    canvas.width = 100;
                    canvas.height = 100;
                    const ctx = canvas.getContext("2d");
                    ctx.drawImage(e.target as HTMLImageElement, 0, 0, canvas.width, canvas.height);                 
                    const srcEncoded = ctx.canvas.toDataURL("image/jpeg");                  
                    return srcEncoded;
                }
            }           
        }
    }

一旦值返回，我希望将其分配给document.getElementById("card-img").setAttribute('src', srcEncoded); 尝试使用pipe，then但它不起作用。请帮助正确的呼叫方式this.resizeImg(file).???

干杯

标签： javascriptangular

Answer 1

您可以将回调包装在一个承诺中并实现这一点。我已将您的两个回调函数包装在 Promise 中。

 private async resizeImg(file) {
        if (file && file.type && file.type.includes("image")) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            const e = await new Promise((resolve, reject) => {
                reader.onload = (e) => {
                    resolve(e);
                }
            });
            const imgElement = document.createElement("img");
            imgElement.src = e.target.result as string;
            const imgE = await new Promise((resolve, reject) => {
                imgElement.onload = (e) => {
                    resolve(e);
                }
            });
            const canvas = document.createElement("canvas");
            canvas.width = 100;
            canvas.height = 100;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(imgE.target as HTMLImageElement, 0, 0, canvas.width, canvas.height);
            const srcEncoded = ctx.canvas.toDataURL("image/jpeg");
            return srcEncoded;

        }
    }