How to scale up cropper ?

[arminsalcin]

Hello to all, i want to somehow scale up the cropper view , now is like this i have crop area of {60px x 120px}. I wanto to have it bigger so i can better see crop area.

[ValentinH]

This is an edge case that is not properly handled for narrow vertical images. Are you using the latest version?

[arminsalcin]

I'm using 3.2.1 version

[ValentinH]

Could you please provide an example on Codesandbox so that I better understand what's going on?

[arminsalcin]

Yeah sure, https://codesandbox.io/s/react-easy-crop-demo-with-cropped-output-forked-kl5gu?file=/src/index.js
This is not a bug but just some way what i can do to make scale up frame.

What i want is this now the crop area is small id' like to keep same crop size 60x120 but just to scale it up example :

[ValentinH]

I think you could use a different approach: use aspect={1/2} instead of the cropSize property and only resize to '60x120px' after the crop is done (in the getCroppedImg() logic).

[arminsalcin]

Oh it make sense now i tried that but i use different aspect and that make picture go very wide, aspect={1/2} make it for me, u can close it now, thank u for having time to help an explain i will leave my getCroppedImg() here if someone needs it.

export default async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {
  const image = await createImage(imageSrc)
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  canvas.width = 60
  canvas.height = 120

  ctx.drawImage(
    image,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    60,
    120
  )

  // As a blob
  return new Promise((resolve) => {
    canvas.toBlob((file) => {
      resolve(URL.createObjectURL(file))
    }, 'image/png')
  })
}

[ValentinH]

I think having a cropSize is the source of the confusion. I actually never liked it to be honest and regret accepting the PR adding it... 🙈

The original goal of this component is to be responsive and having a hard-coded cropSize cannot work for this. This is why we have the aspect property that deals with responsiveness for you.

[arminsalcin]

Definitely agree, when i was start using cropSize i was hoping i will get image cropped to that size, as u can see i edited getCroppedImage to make it export image with that size.

Maybe in future add new function that will do just this, cause having cropSize and not crop it to that dimensions is weird. I know that package is made for responsiveness but i think people would also use this function a lot !

[ValentinH]

The thing is that the actual cropping logic is not built in the library. It's only provided in the demos as an example. It's the developer responsibility to implement any logic in there.

[arminsalcin]

Yep, but when u start with package it's not written anywhere, "Basic Usage" in readme is also without custom logic for exporting image and that also confuses people on some way as they think this it will work out of box, its just little bit confusing when u starting to catch up all what is happening. But beside that package is very useful keep up good work hope it will be better and better !

[laptopmutia]

I think its still good feature, there are a use case when the crop size is determined and its really convenient feature to have in that case

[ValentinH]

@laptopmutia are you talking about the function to output the cropped image?

[tiavina-mika]

Yep, but when u start with package it's not written anywhere, "Basic Usage" in readme is also without custom logic for exporting image and that also confuses people on some way as they think this it will work out of box, its just little bit confusing when u starting to catch up all what is happening. But beside that package is very useful keep up good work hope it will be better and better !

@arminsalcin I'm facing the same features as you, so what have you finally done?

[ValentinH]

@tiavina-mika what is your issue?

[gregg-cbs]

Hey @ValentinH , maybe you can help me, i am having a similar issue.

I want the image crop frame to always be the same size, but it seems the size changes depending on the ratio of the image.

Please see the video recording below.
The first image has a nice big frame, the second image the crop frame shrinks, how would i get the frame to always be the same size?
https://user-images.githubusercontent.com/57114335/140616833-21a6070e-b058-4044-9cf5-6d87b33e9d2e.mov

<Cropper
	image={image}
	crop={crop}
	zoom={zoom}
	// cropSize={{width: '224px', height: '170px'}}
	cropShape="rect"
	aspect={4 / 3}
	rotation={rotation}
	// restrictPosition={true}
	onCropChange={setCrop}
	onCropComplete={onCropComplete}
	onZoomChange={setZoom}
/>

[ValentinH]

The objectFit prop with horizontal-cover value should what you need. See https://codesandbox.io/embed/react-easy-crop-forked-p9r34

[sachinksachu]

Hi, @ValentinH
It would be better if the Cropper view fits its parent container. I have tried the "objectFit" and "aspect" attribute still doesn't fit the parent conatiner. I have override the style of the cropper view, but it effects the cropped position of resultant image.
Thanks !!

[ValentinH]

I'm not sure to understand what you want and why the solution in my last comment doesn't work for your use case. Could you detail a little bit, with some visuals maybe.

[sachinksachu]

Hi @ValentinH
I have attached an image.
Tha image fits the parent conatiner, but the cropper view doesn't. Is there any way to fit the the cropper view to the size of the parent. I tried to override cropper view's style, but it effects the cropped position of resultant image .

Thanks

[ValentinH]

What objectFit property did you use? Did you try to give the cropped the same ratio as your parent div?

[sachinksachu]

What objectFit property did you use? Did you try to give the cropped the same ratio as your parent div?

This is what I have given ObjectFit={1}

[ValentinH]

This is not a valid value, please have a look to the documentation and the objectFit demo.

[thucpn]

I got the solution for this problem by get the uploaded image size and set objectFit attribute in

<Cropper
  ...
  objectFit={width > height ? 'vertical-cover' : 'horizontal-cover'}
/>

[manoelneto]

I wonder if there is this option automatically in the library from the previous comment

[ValentinH]

What do you mean?

[manoelneto]

I meant

<Cropper
  ...
  objectFit={width > height ? 'vertical-cover' : 'horizontal-cover'}
/>

as the cropper already deals with image size and for us to don't need to load then to get its size and pass the proper objectFit, should be nice if we could see an option like that in the cropper iself, like best-fit or something. to set vertical or horizontal cover based from image proportion. I can record a screencast of the problem I'm facing now

[ValentinH]

This is a great idea. I would call it "auto-cover".

Would you like to do a PR? 🙂

[manoelneto]

Sure, I'll open in next week.

[ValentinH]

As far as I know, no work was started on this so feel free to create a PR if you want 😎

[MrHolmes19]

Hi @ValentinH !

Could you help me with this?

I am trying to crop an image to an exact size (let say 800 x 400 px). I can't use "aspect", instead I used the cropSize parameter and passed "{width: 800, height: 400}" but it's not working.

When I check the croppedAreaPixels in onCropComplete method it changes depending on the image real size. I thought cropSize would fix the size at this stage. I don't want to set the width and height in getCroppedImg logic because it ends up cutting an extra piece of the image.

What should I do?

[MrHolmes19]

I just found my answer here: #176 . However, It would be better if the cropper could fit the real cropsize

[chongdongkongjian]

Definitely agree, when i was start using cropSize i was hoping i will get image cropped to that size, as u can see i edited getCroppedImage to make it export image with that size.

Has the function of cutting fixed sizes been provided? What should I do？

[tahsandoodle]

hello, I want full width crop and heigh will be auto

[ValentinH]

You should try the objectFit prop and set it to "cover"

[tahsandoodle]

You should try the objectFit prop and set it to "cover"

I want full width base crop and height will be auto