Cropped area not accounting for zoom of containing elements properly about react-image-crop HOT 6 OPEN

I am also seeing this issue.

from react-image-crop.

I used to have a zoom prop, perhaps something like that can fix it 🤔

/** A non-visual prop to keep pointer coords accurate when a parent element is scaled.
Not to be confused with the `scale` prop which scales the image itself. Defaults to 1. */
zoom?: number

https://github.com/sekoyo/react-image-crop/blob/9.1.1/src/ReactCrop.tsx#L358

https://github.com/sekoyo/react-image-crop/blob/9.1.1/src/ReactCrop.tsx#L436

Are you able to make an example of the issue on React Flow (haven't used or heard of it before)?

from react-image-crop.

React Flow is a library used for node based workflows. The way the zoom works under the hood is utilizing transform: scale with CSS, so you can just wrap a ReactCrop element in a scaled div to see the same effect. Here is the result of doing that with the CodeSandbox example:
https://codesandbox.io/p/sandbox/react-image-crop-demo-with-react-hooks-forked-with-zoomed-out-container-gqjwpg

It would be possible to make a CodeSandbox with React Flow in particular, but that would require more boilerplate since you need to define all your node types. In my current project, the behavior is slightly different than the example above as the cropped output is accurate to the crop area visually. It just won't let you set the crop area to larger than the zoom amount. In other words, the screenshot I attached above is the maximum selectable area.
I believe bringing that zoom prop back would do the trick in both cases though.

from react-image-crop.

Sorry I misread - looks like it's only an issue with the crop preview.

So you can modify it like:

async function canvasPreview(
  image: HTMLImageElement,
  canvas: HTMLCanvasElement,
  crop: PixelCrop,
  scale = 1,
  rotate = 0,
  appScalePc = 100,
) {
  const ctx = canvas.getContext('2d')

  if (!ctx) {
    throw new Error('No 2d context')
  }

  const scaleX = (image.naturalWidth / image.width) * (100 / appScalePc)
  const scaleY = (image.naturalHeight / image.height) * (100 / appScalePc)
  
  // ....
}

And if your transform: 'scale(50%)' is 50%, then pass 50 to appScalePc

from react-image-crop.

Would it still be possible to expose that zoom prop?

from react-image-crop.

I fixed this with the following subclass - would it be possible to expose a scale or zoom parameter as it seems like it does this?

interface ScaleCompatibleReactCropProps {
  scale?: number
}

class ScaleCompatibleReactCrop extends ReactCrop {
  props: ReactCropProps & ScaleCompatibleReactCropProps

  getBox() {
    const box = super.getBox()
    const { scale } = this.props

    if (scale !== undefined) {
      box.width /= scale
      box.height /= scale
    }

    return box
  }
}

from react-image-crop.