Fill error in image cropper

[fitness23]

If you set in the config of the imagecropper a width that is larger than the div container which holds it, then the resulting cropped image will be filled up with the fill color. So for example if your div container is 1000px but your config width is 3000px, you will get the fill color. This of course is an undesired effect as both should be independent of one another.

As an example, please visit: https://stackblitz.com/edit/angular-2urf1b-djzjtf?file=app/image-cropper-example-02.component.ts The container width of that right hand pane is about 480px, and I have set a config width of 2150px. Try selecting a large image from your computer (say 3000px width) and you'll see the red fill color to the right hand side of the resulting cropped image.

I've checked and this issue wasn't occurring in Version 2 Alyle.

[fitness23]

Hi, has there been any fix for this? :)

[fitness23]

Hi @Enlcxx , this issue seems to still be present. Can this issue be reopened please?

[Enlcxx]

Hi @fitness23, I'm sorry for the delay. A version with those changes has not currently been released, in a few days I will release a new version.

[Enlcxx]

new version 10.5.0

[fitness23]

Hi @Enlcxx I've just tried the new version 10.5.0 today but it appears to still have the same issue as before.

[Enlcxx]

@fitness23, I forgot to say that you must add to your config: responsiveArea: true. Btw, thanks for reporting.

[fitness23]

Oh yes that's perfect now. Thank you so much for all your hard work. It really is such a great tool :)

[fitness23]

Hi @Enlcxx

Oh sorry I just noticed one more thing...

If you set the width and height for the output to be large than the window size (say something big like 1920px x 640px. The cropper area size will shrink down all ok, but your output file won't actually be the size you want it to be. So if you specify 1920px width but the window it's in is only 800px, then your output file will be 800px width instead of 1920px.

[Enlcxx]

Hi @fitness23, what configuration are you using? I have encountered that problem when using config:

class MyComponent {
  myConfig: ImgCropperConfig = {
    // 3:1 aspect ratio
    width: 200 * 3,
    height: 200,
    keepAspectRatio: true,
    responsiveArea: true,
    output: ImgResolution.Default // <--- here
  };
}

[fitness23]

Hi @fitness23, what configuration are you using? I have encountered that problem when using config:

class MyComponent {
  myConfig: ImgCropperConfig = {
    // 3:1 aspect ratio
    width: 200 * 3,
    height: 200,
    keepAspectRatio: true,
    responsiveArea: true,
    output: ImgResolution.Default // <--- here
  };
}

Hi @Enlcxx as yes that was it. I've changed it to:

myConfig: ImgCropperConfig = {
        width: 100, // Set initial value
        height: 100, // Set initial value
        fill: '#ff2997',
        responsiveArea: true
    };

Which runs fine now. Thanks so much.

May I ask what is the preferred way of updating the width and height later (say if you're getting those dimensions from Input. Is this ok?

@Input() dimensions: any;

ngOnChanges(changes: SimpleChanges) {

        this.myConfig.width = this.dimensions.width;
        this.myConfig.height = this.dimensions.height;

    }

[Enlcxx]

It may work, but I'm not sure, what I'm sure of is that it works when it is set before the image has loaded. You can do something like this:

@Input()
set dimensions(value: any) {
  this._newCropperConfig = {
    ...this.myConfig,
    width: value.width,
    height: value.height
  };
}

loadImageFromEvent(event: Event) {
  this.cropper.config = this._newCropperConfig; // Set new Config
  this.cropper.selectInputEvent(event);
}

Don't do it when an image is loaded.