CODEWITHSUNDEEP
javascriptangular
Kukula Mula
Kukula Mula

Reputation: 1869

Angular how to call async functions and continue once result returns

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

Upvotes: 0

Views: 44

Answers (1)

Sunitha Premakumaran
Sunitha Premakumaran

Reputation: 122

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;

        }
    }

Upvotes: 1

Related Questions