search

Mawi137 / ngx-image-cropper

An image cropper for Angular
MIT License
774 stars 207 forks source link

Fixed canvas size #643

Open adi-wtag opened 2 months ago

adi-wtag commented 2 months ago

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 : Screenshot (8) But if i choose a image that has insignificant dimension, for example : 100 x 100 It looks like this : Screenshot (10) 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 commented 1 month ago

Hi @Mawi137 , any suggestion ?

Mawi137 commented 1 month ago

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 commented 1 month ago

@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. Screenshot (15) Screenshot (16)

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 commented 1 month ago

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 commented 3 weeks ago

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

loiddy commented 2 weeks ago

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?