I am trying to resize a picture that user enter as an input field in a form.

This is my resizing function :

const resizeImage = async (imageFile, max_px) => {

    let result = null

    await createImageBitmap(imageFile)
        .then(async (img) => {  //img: [ImageBitmap] can be drawn on canvas
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            const originalWidth = img.width;
            const originalHeight = img.height;

            const maxLength = Math.max([originalWidth, originalHeight])

            const resizingFactor = max_px / maxLength

            const canvasWidth = originalWidth * resizingFactor
            const canvasHeight = originalHeight * resizingFactor

            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

            debugger

            context.drawImage(
                img,
                0,
                0,
                originalWidth * resizingFactor,
                originalHeight * resizingFactor
            )

            debugger

            canvas.toBlob((blob) => {
                result = blob
                debugger
            }, 'image/jpg')

            debugger
        })

    return result

}

Everything is fine until I try to convert the canvas to a blob.

The debugger in the callback function of 'toBlob' is never reached. What am I doing wrong ?

Thanks fr your help !