Using Croppr on a scaled page

[jeroenbell]

Hi,

I'm using Croppr to provide my users a basic cropping tool. The only issue I'm having is that the page where the Croppr element is on, is scaled based on the browser width (and to add complexity the element can be scaled aswell). This leads to incorrect selection values. Using returnMode: raw returns the correct values, but I'm unable to select the entire image. Here's an example using the demo, with the center <div> scaled down to 0.85:

I've tried setting the inversed scale in the onInitialize hook like so onInitialize: instance => instance.scaleBy(1.25) but it seems that this is reset as soon as you resize/move the selection window.

[jamesssooi]

Hi @jeroenbell, a fix for this bug has been made in the develop branch. It will be released on npm once it's been fully tested out.

In the meantime you can download the latest distribution files on the develop branch.

[jeroenbell]

Hi @jamesssooi, thanks for the quick reply! I'm using the develop branch and have done some minor testing and all seems to work well. Will report back if I find any bugs.

[jeroenbell]

The only thing I've found so far is that upon resizing the window after starting a Croppr instance, the box doesn't respect the boundaries. Not sure why because as far as I can see every time a move is called, it uses .getBoudingClientRect() on the containing element, which should always return the correct dom values?

[jamesssooi]

Ah, that's because Croppr calculates a global scale factor to apply to the redraw() method only once during initialization. We can recalculate it on every redraw (very tiny performance hit?), or expose a method to recalculate these values (cluttering the API). Personally leaning towards the former.

[jeroenbell]

Yes I figured that. I've tried a quick hack by recalculating the boundaries on every window resize but that didn't seem to have any effect. I hope I'll have time to dig into the code a little deeper today.

[Chrisstar56]

Hi,

I'm using Croppr to provide my users a basic cropping tool. The only issue I'm having is that the page where the Croppr element is on, is scaled based on the browser width (and to add complexity the element can be scaled aswell). This leads to incorrect selection values. Using returnMode: raw returns the correct values, but I'm unable to select the entire image. Here's an example using the demo, with the center <div> scaled down to 0.85:

I've tried setting the inversed scale in the onInitialize hook like so onInitialize: instance => instance.scaleBy(1.25) but it seems that this is reset as soon as you resize/move the selection window.

I know this is completely off topic, but could you please tell me what web browser you are using? I just love the look of it and would like to try it as well.

[jeroenbell]

I know this is completely off topic, but could you please tell me what web browser you are using? I just love the look of it and would like to try it as well.

It's just Google Chrome. Not sure if it's rolled out to the stable version already, I'm using the developer build (version 73). If you don't have the new interface yet, you can try to enable it following the steps below: https://www.theverge.com/2018/7/26/17616112/how-to-chrome-material-design-refresh

[axelfontaine]

Any news on a release with this fix? Is this project still alive?