Fixed canvas size

[adi-wtag]

I have implemented the image cropper with a static height and width of 170 for cropper and a aspect ratio of 2.25
For large image everything is working properly. For example :

But if i choose a image that has insignificant dimension, for example : 100 x 100
It looks like this :

The reason behind this is that I was wrapping the image cropper with a wrapper that has min height set to 265 px.
I want the canvas size to be of height 265px always regardless of image dimension. How can I achieve this ? Any suggestion would really mean so much for me. I am kinda stuck here.

[adi-wtag]

Hi @Mawi137 , any suggestion ?

[Mawi137]

Did you try setting the min-height of the image cropper itself to 265px? You can then use the transform input to center the image vertically.

[adi-wtag]

@Mawi137 , If I set the min height on image cropper itself, it does take the height, but the canvas is still small. I can't go outside of it.

I am trying the canvas to take the whole space of the image cropper and then on scale increase or decrease, it should zoom in and out.

[loiddy]

I haven't checked, but I think the canvas size can't be bigger than the image size. If you share code with us we can have a look and see what's going wrong.

I think what mawi is saying is to vertically center the inner red box in your screenshot.

[alpesh88ww]

Here is a demo I made, it might help you:
https://stackblitz.com/~/github.com/alpesh88ww/ngx-image-cropper-primeng

[loiddy]

Thanks for the demo :)

I wanted to see how @adi-wtag had his code set up, but it doesn't really matter now. I had a look at the code and how it is now what they're asking for can't be done.

The HTML is image-cropper > div > and all the elements that render the stuff in the little red box. That's why the canvas isn't setting up the entire space. That div's css needs to change for that to happen. Also the cropper box css. It uses fixed px values for positioning and size. Maybe using % would work.

But some questions... Your small img is going to look pixelated from the start if you do this. Is that what you want? Also what do you mean by zooming in and out? The smaller red box becoming bigger and smaller?

[adi-wtag]

@alpesh88ww nice presentation! But that does not clarify my concern. I am uploading a video to explain the scenario better.

[adi-wtag]

Hi @loiddy
Please have a look at this video.

Screen.Recording.2024-09-16.at.3.53.22.PM.mov

As you can see, at first attempt, I am using a large picture. Since the picture is larger than my expected canvas size, I can scale it up and down as well as move the cropper on the whole canvas. I want my canvas size to be fixed even if I choose a small image. But that's not happening. Please look at my second attempt with a smaller image. The canvas size has become very small. I can't go outside of it, even though I can scale the image up and down. Since I can scale it down and up, should't the canvas size be flexible ? So that even with smaller image, I can scale that up and it will cover the whole canvas size.
My expected canvas size was the outer div with red border from previous comment. And I want to move my cropper anywhere inside that div.

[loiddy]

Hi @adi-wtag,

Thank you for the video. Unfortunately how the library works now it can't do what you are asking for.

It can resize though, so you could write code that checks if the area of the image is smaller than the smallest area you want it to be and if it is, use the app to resize it and then display that image. I've never done this so this is just an idea. I'm not 100% sure it would work. I suspect it would though. I would do this with the app hidden till I display the new resized image. A draw back is that it would take longer for it to be ready for user interaction.

Best of luck!

[adi-wtag]

Hi @loiddy Thanks for the suggestion. I have one more confusion. The inner div from above image, Is there any way to find out the height and width of that div ? So that I can centre my cropper position. Previously It was taking whole width and height of the outer div so I was able to calculate the position and set that to centre the cropper. Since, for smaller images it does not take the whole width and height, Is there any way to centre the cropper/round circle ?

[loiddy]

You can use the cropperReady output to get the dimensions of the image displayed, including the extra area added by containWithinAspectRatio – I'm assuming you have it set to true, cos I can see the cropper moving around where there's no image.

Use the dimensions given by cropperReady to set the cropper to the dimensions you want AND center it.
x1: dimensions.width / 2 - width you want / 2
x2: dimensions.width / 2 + width you want / 2
Then the same with y1 and y2.