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

Few questions #67

Open
sadikyalcin opened this issue May 20, 2024 · 1 comment
Open

Few questions #67

sadikyalcin opened this issue May 20, 2024 · 1 comment

Comments

@sadikyalcin
Copy link

sadikyalcin commented May 20, 2024

Very nice cropper. As documentation is incomplete, I haven't found answers to the following;

  • Is there a way to disable the cropper? disabled: bool
  • How does the responsiveness work here? I can see the examples are responsive but with normal UI, it isn't for me. The whole wrapper doesn't scale and the image is at fixed size.
  • Is there an img on load event? As the cropper is always undefined for me with the onReady event. I need to get the image details ie with/height when the cropper is initialised. Currently, I'm create a new image and getting the dimensions that method which isn't ideal.
<Cropper
  ref={cropperRef}
  src={image}
  backgroundWrapperProps={{
    scaleImage: false,
  }}
  imageRestriction="fitArea"
  onChange={onChange}
  onMoveEnd={onMoveEnd}
  onResizeEnd={onResizeEnd}
  className="cropper"
  resizeImage={false}
  moveImage={false}
  checkOrientation={false}
  minWidth={props?.minWidth}
  minHeight={props?.minHeight}
  onReady={(cropper) => {
    // undefined: cropper, cropperRef.current
  }}
  // need a disabled prop so I can't only show a "preview" like UI until a button is clicked
  stencilProps={{
    handlers: isCropping ? true : false,
    lines: isCropping ? true : false,
    aspectRatio: props?.aspectRatio ? props?.aspectRatio : '',
    movable: isCropping ? true : false,
  }}
/>

Edit: found the issue with the responsiveness on my end. It is working as it should now. However, is there a way of defining a max width & height on the wrapper?

@Norserium
Copy link
Collaborator

@sadikyalcin, I've updated the cropper recently, to there are some answers.

Is there a way to disable the cropper? disabled: bool

I've added the disabled prop to <Cropper/> in 0.20.0.

Is there an img on load event?

You are right, it's onReady callback. It was fixed in 0.20.0 too.

However, is there a way of defining a max width & height on the wrapper?

It's need to reproduce your issue. Could you help me with that?

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

2 participants