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?