cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

Cropped Image is looking blur? #213

Closed sudhirroy-tudip closed 6 years ago

sudhirroy-tudip commented 7 years ago

When I crop image and use it's base 64 generated text in image src, result image is blur. How can we resolve it?

zeeshanshanif commented 7 years ago

+1. I am also facing the same issue. Also, the image I crop is square always even though I have set parameters as 4:3 ratio. Below are my parameters.

this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 150;
this.cropperSettings.height = 113;
this.cropperSettings.canvasWidth = 500;
this.cropperSettings.canvasHeight = 500;
this.cropperSettings.minWidth = 10;
this.cropperSettings.minHeight = 10;
this.cropperSettings.rounded = false;
this.cropperSettings.keepAspect = true;
this.cropperSettings.cropperClass = 'hideImageCanvas';
this.cropperSettings.croppingClass = 'showImageCanvas';
this.cropperSettings.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
this.cropperSettings.cropperDrawSettings.strokeWidth = 2;
this.cropperSettings.compressRatio = 10.0;
this.cropperSettings.preserveSize = false;

Am I doing anything wrong?

PS: I have updated the croppedWidth and croppedHeight values and the issue is resolved. My new values are

this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 150;
this.cropperSettings.height = 113;
this.cropperSettings.croppedWidth = 1280;
this.cropperSettings.croppedHeight = 800;
this.cropperSettings.canvasWidth = 550;
this.cropperSettings.canvasHeight = 500;
this.cropperSettings.minWidth = 10;
this.cropperSettings.minHeight = 10;
this.cropperSettings.rounded = false;
this.cropperSettings.keepAspect = true;
this.cropperSettings.cropperClass = 'hideImageCanvas';
this.cropperSettings.croppingClass = 'showImageCanvas';
this.cropperSettings.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
this.cropperSettings.cropperDrawSettings.strokeWidth = 2;
this.cropperSettings.preserveSize = false;