Search code examples
javascriptcanvasdrawimagetodataurl

Canvas: drawImage progress

I've written a large file upload plugin in JavaScript that allows a user to crop and resize images before they are uploaded using the canvas API. I was wondering if there was a was to check when running drawImage or toDataURL has completed. This would be useful when working with raw images of a couple MB.

Solution

  • The javascript functions drawImage and toDataURL are synchronous functions. That means that the functions will not execute the next function call until they are completely executed.

    Having said that, you could use a simple alert('done'); after the 2 function calls.

    It is not possible to add a progressbar to these functions, however you could use a 'spinner' to indicate a slowly executing function