I am trying to resize image on client side after fixing its orientation, but it takes lot of time and frontend hangs
Please help me out.
Then you need to be finding out the problem, any error messages generated that could be problematic or circular referencing which would eat up you ram.
What does the task manager for the browser say its consuming in memory, resources, etc.?
What do you see when you press F12 and check out any messages (especially error messages)?
What happens if you change the format and quality of the output image?
The profiler says that toDataURL is the bottleneck. Obviously other users encounter the same problem:
They recommend using toBlob instead. Unfortunately this is not supported by Edge:
You might use toBlob nevertheless, use the polyfill given by Mozilla and accept that performance will be worse for Edge users.
Or, if you intend to upload the image to the server, you might do this without previous processing and adjust the the orientation on the server by PHP.