/    Sign up×
Community /Pin to ProfileBookmark

Front End hangs on image resizing

Copy linkTweet thisAlerts:
Sep 14.2018

I am trying to resize image on client side after fixing its orientation, but it takes lot of time and frontend hangs

https://stackoverflow.com/questions/52316319/canvas-transform-function-increasing-size-of-image-after-using-canvas-transform

Please help me out.
Thanks

to post a comment
Full-stack DeveloperJavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootSep 14.2018 — 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.?
Copy linkTweet thisAlerts:
@wbportSep 21.2018 — What do you see when you press F12 and check out any messages (especially error messages)?
Copy linkTweet thisAlerts:
@KeverSep 22.2018 — What happens if you change the format and quality of the output image?

callback(canvas.toDataURL('image/jpeg', .7));
Copy linkTweet thisAlerts:
@SempervivumSep 22.2018 — The profiler says that toDataURL is the bottleneck. Obviously other users encounter the same problem:

https://stackoverflow.com/questions/23413320/canvas-todataurlimage-png-how-does-it-work-and-how-to-optimize-it

They recommend using toBlob instead. Unfortunately this is not supported by Edge:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

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.
×

Success!

Help @schrovski spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...