image cropping is always png

[medTL]

🪲 Bug report

Describe the bug

the image cropper is always return a png image on crop and not giving me the original image type

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
v2.9.6

Angular Version:

Angular CLI: 8.3.19
Node: 10.16.3
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cdk                      8.2.3
@angular/cli                      8.3.19
@angular/flex-layout              8.0.0-beta.27
@angular/http                     7.2.15
@angular/material                 8.2.3
@angular/pwa                      0.803.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.39.2
    

[Enlcxx]

From what I see you have already set a type. If the type was not set in the configuration, it will result in the same source format.

e.g

myConfig: ImgCropperConfig = {
    autoCrop: true,
    width: 150, // Default `250`
    height: 150, // Default `200`
    fill: '#ff2997', // Default transparent if type = png else #000,
    type: 'image/jpeg' // <------------ Remove this
  };

BTW, the type of format you set is not correct, it can be image/jpeg, image/png, etc...

Sorry for not documenting this, I'm working on that.

[Exlord]

I have the same problem and I am not setting any type for config

  myConfig: ImgCropperConfig = {
    width          : 238,
    height         : 238,
    round          : true,
    keepAspectRatio: true,
    output         : {
      width : 238,
      height: 238
    },
    resizableArea  : true,
    maxFileSize    : 8 * 1024 * 1024,//8Mb
  };

my input is jpeg but the output is png?

I had to manually set the type

  constructor(
    @Inject(LY_DIALOG_DATA) private event: Event,
    readonly sRenderer: StyleRenderer,
    public dialogRef: LyDialogRef
  ) {
    this.myConfig.type = (this.event.target as HTMLInputElement).files[0].type;
  }

"@alyle/ui": "^10.3.0",

Angular CLI: 10.1.6
Node: 12.18.3
OS: win32 x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cdk                    10.2.4
@angular/cli                    10.1.6
@angular/material               10.2.4
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      3.9.7