Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make the crop pan to always fit the height and width on the image. #512

Open
syedslegend786 opened this issue Feb 4, 2024 · 17 comments

Comments

@syedslegend786
Copy link

I have images with different height and width. Some images are too small and some are with large height and i have to show images in "contain" mode.
How to make the cropper pan always fit the image height and width.

I tried different aspect ratios but it does not worked.

@ValentinH
Copy link
Owner

Either you have to set the cropper aspect ratio to the same value as the image one or you should use the cover object fit.

@syedslegend786
Copy link
Author

Either you have to set the cropper aspect ratio to the same value as the image one or you should use the cover object fit.

<div className="relative w-full aspect-square">
            <Cropper
              image={value}
              crop={crop}
              zoom={zoom}
              onCropChange={setCrop}
              onCropComplete={onCropComplete}
              onZoomChange={setZoom}
              objectFit="cover"
              showGrid={false}
            />
          </div>

This is my code but the crop pan , do not fit with the height and width of the image show inside div. Would you please help me to resolve this one.

@ValentinH
Copy link
Owner

Please provide a CodeSandbox showing your issue. It's hard to understand with just words 😅

@syedslegend786
Copy link
Author

Please provide a CodeSandbox showing your issue. It's hard to understand with just words 😅

https://codesandbox.io/p/sandbox/stupefied-haibt-rfgm9h?file=%2Fsrc%2Findex.js%3A24%2C13

this is the case senerio, image should be object-contained, height width could be different,
require: cropping pan should always equal to the width and height of the image(image object contain)

@ValentinH
Copy link
Owner

image

@syedslegend786
Copy link
Author

image

Ops! sorry for that.
try this one:
https://codesandbox.io/p/devbox/confident-brahmagupta-7lvd3h

@ValentinH
Copy link
Owner

If I understand correctly what you want, you should set the cropper aspect ratio to the same value as the image one.
So if the image is 1920x1000px, set the aspect prop to 1920/1000.

@ValentinH
Copy link
Owner

Closing as there was no answer for a while. Comment to re-open 😉

@teddybee
Copy link

I have similar issues, I cant set the (max) cropSize to the image's size.
The image is 1500x1100 px, but when I set the cropSize to that, the light box is much larger than the image itself.
Zoom is fixed to 1.

@ValentinH
Copy link
Owner

I really recommend using the aspect prop instead of cropSize.

@teddybee
Copy link

teddybee commented Mar 15, 2024

I tried that as well(aspect set to 15/11, container div's aspectRatio as well), not helped. Also, I need to cut the image pixel perfect.
The cropSize somewhere around 1340*970 covers the image.

@teddybee
Copy link

Do you need a sample app for reproduction?

@ValentinH
Copy link
Owner

Yes definitely, this would help

@teddybee
Copy link

teddybee commented Mar 16, 2024

I think the problem is, there is no possibility to keep the image size the same 1-1px mapping with zoom=1. The image will always squeezed. I have tried without cover param, the default is "cover".
I checked the div size of the cropper component: 1336*980

@teddybee
Copy link

I got it now, and find logically strange to use the cropSize prop relative to bounding div`s size.
It would be better if we can set it eighter in percentage of the image or pixels of the image(as the initialCroppedArea).
In a responsive UI, it is hard to maintain the same result/state(by sliders), if the div is changing.

@ValentinH
Copy link
Owner

That's why I don't like the cropSize prop and that it's discouraged to be used from the Readme. aspect is what you are looking for and is meant to be used on responsive UIs.

The pixels size shouldn't matter in the crop UI: it only matters when actually cropping the image to produce the new image.

@syedslegend786
Copy link
Author

syedslegend786 commented May 31, 2024

I came to handle cropSize in this way:

  1. if you want a controlled aspect ration of the cropper, provide the image dimensions,
  2. if you want that the cropper by default take the full width and height same as the image src provided,
    then you can achieve that using onMediaLoaded function of the cropper.
// controlled dimension of the cropper.
const dimensions={
height:1024,
width:1024
}

const [cropperSize, setcropperSize] = useState<Size | undefined>(undefined)


// calculate the aspect ratio
const aspectRatio = useMemo(() => {
    if (dimensions) {
      return heightWidthToAspectRatio({
        width: dimensions?.width ?? 0,
        height: dimensions?.height ?? 0
      })
    } else if (cropperSize) {
      return cropperSize.width / cropperSize.height
    } else {
      4 / 3
    }
  }, [cropperSize, dimensions])
  
  <Cropper
              ...
              aspect={aspectRatio}
              onMediaLoaded={({ naturalHeight, naturalWidth }) => {
                setcropperSize({ height: naturalHeight, width: naturalWidth })
              }}
              ...
 />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants