Cropped Image with dynamicSizing=true not respecting croppedWidth/croppedHeight

[Theophabis]

Hi there, thanks for the great lib!

I'm running in some problems with the following config:

this.cropperSettings = new CropperSettings();
this.cropperSettings.noFileInput = true;
this.cropperSettings.width = 150;
this.cropperSettings.height = 150;
this.cropperSettings.croppedWidth = 150;
this.cropperSettings.croppedHeight = 150;
this.cropperSettings.dynamicSizing = true;
this.cropperSettings.cropperClass = "custom-class";

css

.custom-class {
  width: 100%;
}

The cropped image seems dependent on the canvas size it has available and not fixed to my settings of 150/150. Am I doing something wrong? Tried a lot of different settings but always get squeezed images as output. Some are much bigger 750/300ish, depending on the available size for the canvas. When i remove the dynamicSizing everything is okey (except for not being responsive).

edit: using angular 4.0.0 and 0.8.4 of your lib

[cstefanache]

So ... not sure that I really understand your problem but there might be the chance that you stumble upon a bug.

If you need to preserve size of the final output image you can set: this.cropperSettings.preserveSize = true;

and you will get (as output) a cropper image with 1-1 pixel ratio with the original. there was a bug there and I am going to do a release on 0.8.5 today for you to check.

if still reproducible - can you please send me 2 image samples with the bug?

thank you!

[Theophabis]

Thanks for the answer, i will check that out. What i expected was that the cropped image has the size I specified in the settings. Let me show you how it behaves.

Original Image:

With the following settings I get this image

this.cropperSettings = new CropperSettings();
this.cropperSettings.noFileInput = true;
this.cropperSettings.width = 150;
this.cropperSettings.height = 150;
this.cropperSettings.croppedWidth = 150;
this.cropperSettings.croppedHeight = 150;

And with those new settings i get that image

this.cropperSettings = new CropperSettings();
this.cropperSettings.noFileInput = true;
this.cropperSettings.width = 150;
this.cropperSettings.height = 150;
this.cropperSettings.croppedWidth = 150;
this.cropperSettings.croppedHeight = 150;
this.cropperSettings.dynamicSizing = true;
this.cropperSettings.cropperClass = "custom-class";

[cstefanache]

is .custom-class sets the image width to 100%?

[Theophabis]

yes, that seems to be necessary that the control is responsive

[cstefanache]

That seems to be the output image not the cropper - so custom-class does not apply here

[cstefanache]

I can reproduce this when: this.cropperSettings1.keepAspect = false;

but I am trying to enforce a fixed width/height on the cropped result this.cropperSettings1.croppedWidth = 200; this.cropperSettings1.croppedHeight = 200;

The settings: this.cropperSettings.dynamicSizing = true; this.cropperSettings.cropperClass = "custom-class";

apply only on the cropper canvas component and hidden canvas used as buffer

[Theophabis]

Its also reproducable with keepAspect=true. I guess you set the preview image similar to this:

<img [src]="data.image" [width]="cropperSettings.croppedWidth"
                                     [height]="cropperSettings.croppedHeight">

Which in turn corrects the wrong sized cropped image to show as if its correct. But you can see in the dev-tools that the image is out of proportion (or in my case i can also see the uploaded result has resolution 756x378 with dynamicSizing and custom-class instead of 150x150 without dynamicSizing and custom-class).

Is there a way to force the cropped result to be a fixed size with dynamic sizing or is it a bug or am I doing something wrong?

[Theophabis]

here's what i mean:

[limpep]

@Theophabis have you tried the following

<img [src]="data.image" [width]="croppedWidth" [height]="croppedHeight"> ?

[Theophabis]

@limpep yes thats what I do. You can see in the screenshot above that the preview image from the img-tag looks okey because it has fixed width/height set that corrects the wrong sized data.image. On the right side of the screenshot you see the chrome dev tools that show the real data.image with wrong resolution. The problem is not the preview image, its that data.image has the wrong resolution. The first images that i postet in answer 2 are the actual images that are in data.image and not from a preview or something.

[zbarbuto]

This is definitely a bug, as preserveSize: true with dynamicSizing: true causes the output image to be cropped with the correct ratio but the wrong dimensions (the dimensions use the croppedWidth/croppedHeight ratio but scaled to the original image size).