Krop for Kotlin and Compose Multiplatform

Easy to use image cropping library for Kotlin and Compose Multiplatform, with support for shapes, aspect-ratios, transformations, large images, auto zoom...

Demo

Getting Started

1. Add Dependencies

Version:

Option 1: Add the ui module to use the crop dialog out of the box:

commonMain.dependencies {
    implementation("com.attafitamim.krop:ui:$version")
}

Option 2: If you are looking for a custom design, use the core module instead:

commonMain.dependencies {
    implementation("com.attafitamim.krop:core:$version")
}

For hints on how to use core logic for a custom design, check sources of the ui module.

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,
    )
)