easycrop icon indicating copy to clipboard operation
easycrop copied to clipboard

Image cropper for jetpack compose

EasyCrop for Jetpack Compose

Easy to use image cropping library for Jetpack compose, with support for shapes, aspect-ratios, transformations, large images, auto zoom ...

Getting Started

1. Download

Add a dependency on the library to your Android project (Desktop not supported for now)

dependencies {
    implementation("io.github.mr0xf00:easycrop:0.1.1")
}

2. Create an ImageCropper instance

Option 1 : inside the composition

val imageCropper = rememberImageCropper()

Option 2 : outside the composition (eg. ViewModel)

class MyViewModel : ViewModel {
    val imageCropper = ImageCropper()
}

3. Crop

scope.launch {
    val result = imageCropper.crop(bitmap) // Suspends until user accepts or cancels cropping
    when (result) {
        CropResult.Cancelled -> { }
        is CropError -> { }
        is CropResult.Success -> { result.bitmap }
    }
}

4. Show the crop dialog

val cropState = imageCropper.cropState 
if(cropState != null) ImageCropperDialog(state = cropState)

That's it !

Using different sources

The crop function provides overloads for ImageBitmap, Uri, File, but it is also possible to use a custom ImageSrc.

You can use the rememberImagePicker function to easily pick an image and crop it :

val scope = rememberCoroutineScope()
val context = LocalContext.current
val imagePicker = rememberImagePicker(onImage = { uri ->
    scope.launch {
        val result = imageCropper.crop(uri, context)
    }
})

Customization

To customize the ui of the image cropper you can provide a different implementation of CropperStyle to the cropper dialog. You can also use the CropperStyle factory function. example :

ImageCropperDialog(
    state = cropState,
    style = CropperStyle(
        overlay = Color.Red.copy(alpha = .5f),
        autoZoom = false,
        guidelines = null,
    )
)