search

ailon / cropro

Crop, rotate, flip, and straighten images in your web apps.
Other
13 stars 4 forks source link

Editor opens very slow and feels like an infinity loop #15

Closed bennymeier closed 1 year ago

bennymeier commented 1 year ago

Hi, we are testing to introduce cropro in our product because we are already convinced by markerjs2. Unfortunately the editor opens very slowly, it takes 2-4 seconds to open an image of 2-4MB. It also feels almost like an infinity loop.

Do you have any idea what this could be due to? I am using the normal code from the demo.

You can check it out here: https://codesandbox.io/s/cropro-all-defaults-demo-forked-tcr5mn?file=/index.html

Many greetings Benny

ailon commented 1 year ago

The reason for this is that it renders the image onto an internal canvas when it loads, and it takes a while for large images. I guess I should add a loading indicator or something like that.

Theoretically, it should be possible to rework this so the initial rendering happens in parallel but could be a can of worms in terms of syncing. Or maybe move it to right before rendering the final result and show a progress bar there.

I'll look into it.

oliver-niedermaier commented 1 year ago

The reason for this is that it renders the image onto an internal canvas when it loads, and it takes a while for large images. I guess I should add a loading indicator or something like that.

Theoretically, it should be possible to rework this so the initial rendering happens in parallel but could be a can of worms in terms of syncing. Or maybe move it to right before rendering the final result and show a progress bar there.

I'll look into it.

I'm not sure if cropro's Renderer.ts works the same way as the markerjs2's Renderer.ts, but it seems to me that there are no problems there - even with larger images.

Maybe a customization like in markerjs2 could be a quick solution?

ailon commented 1 year ago

marker.js and cropro work differently in this regard. marker.js never touches the actual underlying image until the final render and since there's no underlying image manipulations in marker.js, everything is much simpler in that regard.

ailon commented 1 year ago

I've just release v1.2.4 where I've changed the rendering logic, and the editor should appear instantly (it could take a moment for the image to show up in it for the first time). The rendering on save now takes a bit longer as a result but I've added a spinner so the perception should be better.

Let me know how it works for you now.

bennymeier commented 1 year ago

I've just release v1.2.4 where I've changed the rendering logic, and the editor should appear instantly (it could take a moment for the image to show up in it for the first time). The rendering on save now takes a bit longer as a result but I've added a spinner so the perception should be better.

Let me know how it works for you now.

Looks very good now imo! Thanks a lot. 🎉