title: Resizing picture from a form to send it resized to the server
body: <p>I am trying to resize a picture that user enter as an input field in a form.</p>
  <p>This is my resizing function :</p>
  <pre><code>const resizeImage = async (imageFile, max_px) =&gt; {
  
      let result = null
  
      await createImageBitmap(imageFile)
          .then(async (img) =&gt; {  //img: [ImageBitmap] can be drawn on canvas
              const canvas = document.createElement(&quot;canvas&quot;);
              const context = canvas.getContext(&quot;2d&quot;);
  
              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) =&gt; {
                  result = blob
                  debugger
              }, 'image/jpg')
  
              debugger
          })
  
      return result
  
  }
  </code></pre>
  <p>Everything is fine until I try to convert the canvas to a blob.</p>
  <p>The debugger in the callback function of 'toBlob' is never reached. What am I doing wrong ?</p>
  <p>Thanks fr your help !</p>