Facilitates image cropping with support for shapes, aspect ratios, transformations, and large images. Offers out-of-the-box or custom UI options and easy integration with image sources.
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:
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.
ImageCropper instanceval imageCropper = rememberImageCropper()
class MyViewModel : ViewModel {
val imageCropper = ImageCropper()
}
imageCropperscope.launch {
val result = imageCropper.crop(bitmap) // Suspends until user accepts or cancels cropping
when (result) {
CropResult.Cancelled -> { }
is CropError -> { }
is CropResult.Success -> { result.bitmap }
}
}
imageCropper to open the crop dialogval 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.
ImageSrc in common code are:ImageBitmapSrc - takes ImageBitmap as a source.For android, crop function provides overloads for File, Uri and ImageStream.
ImageSrc in android are:ImageStreamSrc - takes ImageStream as a source.ImageStream:UriImageStream - takes Uri and Context as sources.FileImageStream - takes File as a source.For ios, crop function provides overloads for UIImage, NSURL and PHAsset.
You can also use cropPHAssetLocalIdentifier and cropPath to pass string values.
ImageSrc in ios are:UIImageSrc - takes UIImage as a source.NSURLImageSrc - takes NSURL or path: String as sources.For desktop, crop function provides overloads for File and ImageStream.
ImageSrc in desktop are:ImageStreamSrc - takes ImageStream as a source.ImageStream:FileImageStream - takes File as 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 -> {}
CropError -> { }
CropResult.Success -> {
bitmap = result.bitmap
bytes = bitmap.encodeToByteArray()
file = FileKit.filesDir /
file.write(bytes)
}
}
}
}
}
| Krop version | Kotlin version | Compose version |
|---|
| 0.3.0-alpha01 | 2.2.20 | 1.9.0 |
| 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 |
PHAssetImageSrcPHAssetlocalIdentifier: StringSurfaced from shared tags and platforms — no rankings paid for.