How to make image picker crop frame circle?

Question

Below photo is how I want to crop. But I only see how to crop in rectangle shape. Pardon my writing format. This is my first time asking question on stack overflow. This is my code for cropping image

Future<File> cropSquareImage(File imageFile) async =>
      await ImageCropper.cropImage(
        sourcePath: imageFile.path,
        aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
        aspectRatioPresets: [CropAspectRatioPreset.square],
        compressQuality: 70,
        compressFormat: ImageCompressFormat.jpg,
        androidUiSettings: androidUiSettingsLocked(),
        iosUiSettings: iosUiSettingsLocked(),
      );

photo crd.

Crop Image in circle shape

*"But I only see how to crop in rectangle shape."* - post that code then — pskink, Sep 13 '21 at 06:36
you have [CropStyle](https://pub.dev/documentation/image_cropper/latest/image_cropper/CropStyle-class.html) enum that you can use — pskink, Sep 13 '21 at 14:06

score 1 · Answer 1 · answered Sep 13 '21 at 06:36

1

Make the cropping element a circle with "border-radius" property, and display it using the same border-radius property. The image is still a rectangle, a square in this case, but if it is cropped as a circle and displayed as a circle, the user only sees a circular image crop.

There is no (reasonable) way to actually STORE an image file with a radius instead of an YYY x ZZZ pixels resolution.

answered Sep 13 '21 at 06:36

Benjamonster

39
5

this works perfect.But I have another question. After cropping,the image quality is low even after I set `Compressed Quality` to 100. – Wai Yan Min Min Sep 13 '21 at 14:48
I don't know what "Compressed Quality" is, but if you're displaying an image, then cropping it into a smaller image, and displaying the new smaller image at the same size as the original larger image, the new one will be stretched to fit the size and appear blurry/grainy. – Benjamonster Sep 14 '21 at 02:51

score 1 · Answer 2 · answered Sep 13 '21 at 07:20

1

If you're using image_cropper, you can just set the property cropStyle to CropStyle.circle ImageCropper.cropImage(cropStyle: CropStyle.circle);

answered Sep 13 '21 at 07:20

jeremynac

1,204
3
11

How to make image picker crop frame circle?

2 Answers2