Easy to use image cropping library for Kotlin and Compose Multiplatform, with support for shapes, aspect-ratios, transformations, large images, auto zoom...
Krop supports the following targets: android, ios, jvm/desktop, js/browser, wasmJs
Version:
Compatibility:
| Krop version | Kotlin version | Compose version |
|---|---|---|
| 0.2.0 | 2.1.21 | 1.8.0 |
| 0.1.4 | 2.0 | 1.7 |
| 0.1.2 | 2.0 | 1.6 |
| 0.1.0 | 1.9 | 1.6 |
Option 1: Add the ui module to use the crop dialog out of the box:
commonMain.dependencies {
implementation("com.attafitamim.krop:ui:$version")
// Optional: use extensions for different 3rd party libraries
implementation("com.attafitamim.krop:extensions-filekit:$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.
val imageCropper = rememberImageCropper()class MyViewModel : ViewModel {
val imageCropper = ImageCropper()
}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 }
}
}val cropState = imageCropper.cropState
if(cropState != null) ImageCropperDialog(state = cropState)That's it !
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,
)
)Krop makes it possible to use different image sources depending on the platform.
The crop function provides overloads for ImageBitmap, but it is also possible to use a custom implementation of ImageSrc.
ImageBitmapSrc- takesImageBitmapas a source.
For android, crop function provides overloads for File, Uri and ImageStream.
ImageStreamSrc- takesImageStreamas a source.
UriImageStream- takesUriandContextas sources.FileImageStream- takesFileas a source.
For ios, crop function provides overloads for UIImage, NSURL and PHAsset.
You can also use cropPHAssetLocalIdentifier and cropPath to pass string values.
UIImageSrc- takesUIImageas a source.NSURLImageSrc- takesNSURLorpath: Stringas sources.PHAssetImageSrc- takesPHAssetorlocalIdentifier: Stringas sources.
For desktop, crop function provides overloads for File and ImageStream.
ImageStreamSrc- takesImageStreamas a source.
FileImageStream- takesFileas a source.
Krop also makes it possible to use different 3rd party libraries using extension modules.
Step 1: Add FileKit extension to your project:
commonMain.dependencies {
implementation("com.attafitamim.krop:extensions-filekit:$version")
}Step 2: Use helper functions to load and save images:
val imagePicker = rememberFilePickerLauncher(type = FileKitType.Image) { image ->
image?.let {
scope.launch {
// Convert the selected image to ImageSrc
val imageSrc = image.toImageSrc()
// Crop the image
when (val result = imageCropper.cropSrc(imageSrc)) {
CropResult.Cancelled -> {}
is CropError -> { /* Handle error */ }
is CropResult.Success -> {
// Convert the cropped image to bytes
val bitmap = result.bitmap
val bytes = bitmap.encodeToByteArray()
// Save the cropped image
val file = FileKit.filesDir / "cropped_image.jpg"
file.write(bytes)
}
}
}
}
}