Displaying crop with css background and object-position

[theo-m]

Great work on the lib, congrats!

I have a use case where I'd like to use the crop information, that I'm now exporting as:

// This follows the "live output" example
            const scale = 100 / cropArea.width;
            onSubmit({
              x: -cropArea.x * scale,
              y: -cropArea.y * scale,
              scale
            });

These values are exploitable when we want to display the image inside a div (<div><img style="transform: translate(...)"/></div>), as done in that live output example.

I have a use case where I want to display the image like so:

    <div
      style={{
        background: `url(${url}) ${x}px ${y}px / ${scale}%`

But it turns out this isn't straightforward because the values provided by the onCropAreaChange callback are centered/offset along something that's not documented.

I've started reading the codebase to understand how these values are computed in order to set them as top/left offsets so that the object-position works for me. This issue also affects the scale.

[ValentinH]

The information about onCropAreaChange are documented here: https://github.com/ValentinH/react-easy-crop#oncropareachangecroppedarea-croppedareapixels

Is it helpful?

[ValentinH]

I think it should be easier to set the background position using percentage though like in the live output example.

[theo-m]

It is, I'm sorry I had overlooked that info somehow - thanks a lot!

[ValentinH]

Here's a working solution that should match your needs: https://codesandbox.io/embed/react-easy-crop-with-live-output-forked-1yrsgv

This works for horizontal images. You might have to change the background size values for horizontal images.

[theo-m]

Wow amazing, this is very cool!