Cropper: Fill color to transparent background within cropbox.

[mikelyc]

Hi, I want to crop all size image into square.

However, some of the images are rectangle so that I allow user to zoom in & out the image.

After that, I will get the cropped x, y, width, height from cropper("getData") and crop it at server side.

Is there any way to fill color into the transparent background?

For example:

The transparent area in the crop box will filled with white color.

[fengyuanchen]

.cropper-crop-box {
  background-color: white;
}

[mikelyc]

The background will not append to the photo right?

After I set to white, but the cropped image doesn't include the background also, it shows as transparent..

[fengyuanchen]

$().cropper('getCroppedCanvas', { 
  fillColor: '#fff' 
})

[karaagacylmaz]

how to do this in Angular 4+? @fengyuanchen

[Supriya-bansal]

I am getting similar issue, when I upload a png cropper adds black background. Any idea how can i fix this in Angular 8 @fengyuanchen ?

I uploaded:

And i got this after crop:

[Usama4745]

I am getting similar issue, when I upload a png cropper adds black background. Any idea how can i fix this in Angular 8 @fengyuanchen ?

I uploaded:

And i got this after crop:

same issue with me

[Supriya-bansal]

I am getting similar issue, when I upload a png cropper adds black background. Any idea how can i fix this in Angular 8 @fengyuanchen ?
I uploaded:

And i got this after crop:

same issue with me

This was quite simple. I did a mistake while specifying the format. Just mention it as png and the cropper wont add default background.

#imageCropper
[imageChangedEvent]="imageChangedEvent"
format="png"
outputType="file"
autoTriggerCrop="false"
autoCrop="false"
[aspectRatio]="aspectRatio"
[maintainAspectRatio]="true"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"

[Usama4745]

I am getting similar issue, when I upload a png cropper adds black background. Any idea how can i fix this in Angular 8 @fengyuanchen ?
I uploaded:

And i got this after crop:

same issue with me

This was quite simple. I did a mistake while specifying the format. Just mention it as png and the cropper wont add default background.

imageCropper

[imageChangedEvent]="imageChangedEvent"
format="png"
outputType="file"
autoTriggerCrop="false"
autoCrop="false"
[aspectRatio]="aspectRatio"
[maintainAspectRatio]="true"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
>

Can we also specify format while adding cropper in javascript

[Usama4745]

I am getting similar issue, when I upload a png cropper adds black background. Any idea how can i fix this in Angular 8 @fengyuanchen ?
I uploaded:

And i got this after crop:

same issue with me

This was quite simple. I did a mistake while specifying the format. Just mention it as png and the cropper wont add default background.

imageCropper

[imageChangedEvent]="imageChangedEvent"
format="png"
outputType="file"
autoTriggerCrop="false"
autoCrop="false"
[aspectRatio]="aspectRatio"
[maintainAspectRatio]="true"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
>

Can we also specify format while adding cropper in javascript

Sorry my question was related to cropperjs