Angular how to call async functions and continue once result returns

Question

I have the following code:

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

once the value returns I wish to assign it to document.getElementById("card-img").setAttribute('src', srcEncoded); tried using pipe and then but it didn't work. Please help with the right way to call this.resizeImg(file).???

Cheers

Sunitha Premakumaran · Accepted Answer · 2021-08-11 09:32:11Z

1

You can wrap your callback inside a promise and achieve this. I have wrapped your two callback functions inside a 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;

        }
    }

answered Aug 11, 2021 at 9:32

Sunitha Premakumaran

1221 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kukula Mula Over a year ago

Can you please add the code of display (the function that calls resizeImg) and how to assign document.getElementById("card-img").setAttribute('src', srcEncoded);

Sunitha Premakumaran Over a year ago

You can call this method by const srcEncoded = await resizeImg(file) and in the next line you can add document.getElementById("card-img").setAttribute('src', srcEncoded);

Collectives™ on Stack Overflow

Angular how to call async functions and continue once result returns

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related