Demos Android & iOS

Android

| Camera Usage | Crop Mode | |--------------|-----------| | | |

iOS

| Camera Usage | Crop Mode | |--------------|-----------| | | |

Desktop

| Choose file| -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | |

About ImagePickerKMP

• Cross-platform: Works seamlessly on Android and iOS
• Camera Integration: Direct camera access with photo capture
• Gallery Selection: Pick images from device gallery with compression support
• Advanced Image Cropping: Cross-platform crop functionality with automatic context management
• Automatic Image Compression: Optimize image size while maintaining quality
• Configurable Compression Levels: LOW, MEDIUM, HIGH compression options
• Async Processing: Non-blocking UI with Kotlin Coroutines integration
• Multiple Format Support: JPEG, PNG, HEIC, HEIF, WebP, GIF, BMP
• Extension Functions: Built-in extension functions for easy image display and manipulation
• Customizable UI: Custom dialogs and confirmation views
• Permission Handling: Smart permission management for both platforms
• Easy Integration: Simple API with Compose Multiplatform
• Enhanced User Experience: Improved layout system with proper zoom and aspect ratio handling
• Highly Configurable: Extensive customization options

Quick Start – Kotlin Multiplatform Image Picker Integration

Installation

Using ImagePickerKMP in Kotlin Multiplatform / Compose Multiplatform

Step 1: Add the dependency

dependencies {
    implementation("io.github.ismoy:imagepickerkmp:1.0.24-beta22")//lastversion
}

Using ImagePickerKMP in Android Native (Jetpack Compose)

Step 1: Add the dependency

implementation("io.github.ismoy:imagepickerkmp:1.0.24-beta2")

iOS Permissions Setup

<key>NSCameraUsageDescription</key>
<string>We need access to the camera to capture a photo.</string>

Step 2: Launch the Camera

 var showCamera by remember { mutableStateOf(false) }
 var capturedPhoto by remember { mutableStateOf<PhotoResult?>(null) }

if (showCamera) {
    ImagePickerLauncher(
        config = ImagePickerConfig(
            enableCrop = false, // Set to true if you want Crop option
            onPhotoCaptured = { result ->
                capturedPhoto = result
                // Now you can access result.fileSize for camera captures too!
                println("Camera photo size: ${result.fileSize}KB")
                showCamera = false
            },
            onError = {
                showCamera = false
            },
            onDismiss = {
                showImagePicker = false // Reset state when user doesn't select anything
            },
            directCameraLaunch = false, // Set to true if you want to launch the camera directly Only IOS
            // It is possible to compress images, by default it is with low compression in the library
            cameraCaptureConfig = CameraCaptureConfig(
                compressionLevel = CompressionLevel.HIGH
            )

        )
    )
}

Step 3: Pick from the Gallery

var showGallery by remember { mutableStateOf(false) }
var selectedImages by remember { mutableStateOf<List<GalleryPhotoHandler.PhotoResult>>(emptyList()) }

if (showGallery) {
    GalleryPickerLauncher(
        onPhotosSelected = { photos ->
            selectedImages = photos
            showGallery = false
        },
        onError = { error ->
            showGallery = false
        },
        onDismiss = {
            println("User cancelled or dismissed the picker")
            showGallery = false // Reset state when user doesn't select anything
        },
        enableCrop = false, // Set to true if you want Crop option 
        allowMultiple = true, // False for single selection
        mimeTypes = listOf(MimeType.IMAGE_PNG) ,// Optional: filter by type
    )
}

Button(onClick = { showGallery = true }) {
    Text("Choose from Gallery")
}

For more customization (confirmation views, MIME filtering, etc.), check out the integration guide for KMP.

Extension Functions for Image Processing

ImagePickerKMP includes built-in extension functions that simplify image handling and display. These extensions work seamlessly with both ImagePickerLauncher and GalleryPickerLauncher, providing a unified API for image processing across platforms.

Available Extension Functions

The library provides four main extension functions for easy image conversion:

• loadBytes() - Returns image as ByteArray for file operations and storage
• loadPainter() - Returns image as Painter for direct display in Compose UI
• loadImageBitmap() - Returns image as ImageBitmap for Compose graphics operations
• loadBase64() - Returns image as Base64 string for API calls and network transmission

Benefits

• Simplified Integration: No need for complex image conversion logic
• Multiple Format Support: Get images in different formats with single function calls
• Performance Optimized: Direct conversion without intermediate processing steps
• Cross-platform Consistency: Same API works identically on Android and iOS
• Memory Efficient: Optimized memory usage during image conversion

Usage Examples

// State variables
var showCamera by remember { mutableStateOf(false) }
var showGallery by remember { mutableStateOf(false) }
var capturedImage by remember { mutableStateOf<Painter?>(null) }
var selectedPhotos by remember { mutableStateOf<List<GalleryPhotoHandler.PhotoResult>>(emptyList()) }

// Camera with extension functions
if (showCamera) {
    ImagePickerLauncher(
        config = ImagePickerConfig(
            onPhotoCaptured = { result ->
                // Use extension functions to get different formats
                val imageBytes = result.loadBytes()        // For file operations
                val imagePainter = result.loadPainter()    // For UI display
                val imageBitmap = result.loadImageBitmap() // For graphics operations
                val imageBase64 = result.loadBase64()      // For API calls
                
                // Store the painter to display later
                capturedImage = imagePainter
                showCamera = false
            },
            onError = { showCamera = false },
            onDismiss = { showCamera = false },
            directCameraLaunch = true
        )
    )
}

// Gallery with extension functions
if (showGallery) {
    GalleryPickerLauncher(
        onPhotosSelected = { photos ->
            selectedPhotos = photos
            showGallery = false
        },
        onError = { showGallery = false },
        onDismiss = { showGallery = false },
        allowMultiple = true
    )
}

// Display captured image
capturedImage?.let { painter ->
    Image(
        painter = painter,
        contentDescription = "Captured photo",
        modifier = Modifier.size(200.dp)
    )
}

// Display selected photos
LazyColumn {
    items(selectedPhotos) { photo ->
        photo.loadPainter()?.let { painter ->
            Image(
                painter = painter,
                contentDescription = "Selected photo",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )
        }
    }
}

Image Compression

Automatically optimize image size while maintaining quality with configurable compression levels.

Compression Levels

• LOW: 95% quality, max 2560px dimension - Best quality, larger files
• MEDIUM: 75% quality, max 1920px dimension - Balanced quality/size
• HIGH: 50% quality, max 1280px dimension - Smaller files, good for storage

Supported Image Formats

• JPEG (image/jpeg) - Full compression support
• PNG (image/png) - Full compression support
• HEIC (image/heic) - Full compression support
• HEIF (image/heif) - Full compression support
• WebP (image/webp) - Full compression support
• GIF (image/gif) - Full compression support
• BMP (image/bmp) - Full compression support

Platform Support

• Android: The library automatically manages the context using LocalContext.current. No need to pass context manually.
• iOS: Context is not required as the library uses native iOS APIs. Enhanced crop coordinate calculations ensure consistent behavior with Android.
• Cross-platform Crop: Unified applyCrop function with automatic context management and consistent coordinate calculations across platforms.

Recent Improvements

• ** Automatic Context Management**: The applyCrop function is now @Composable and handles Android context automatically
• ** Enhanced iOS Crop Accuracy**: Fixed coordinate calculations for precise image cropping on iOS
• ** Improved Layout System**: Resolved z-index conflicts and zoom overlay issues for better user experience
• ** Better Aspect Ratio Support**: Enhanced handling of vertical aspect ratios (like 9:16) with improved space management

| Plataforma | Versión Mínima | Estado | |------------------------|----------------|--------| | Android | API 21+ | ✅ | | iOS | iOS 12.0+ | ✅ | | Compose Multiplatform | 1.5.0+ | ✅ | | Desktop (JVM) | JDK 11+ | ✅ |

Why Choose ImagePickerKMP?

| Feature | ImagePickerKMP
|--------------------------------|----------------| | Compose Multiplatform Support | ✅ Native
| UI Customization | ✅ Full control | Unified Permissions | ✅ Smart handling | Error Handling | ✅ Comprehensive | Camera Integration | ✅ Direct access | Gallery Support | ✅ Multi-select | Cross-platform API | ✅ Single codebase

Key Advantages

• ** Compose Multiplatform Native**: Built specifically for Compose Multiplatform, ensuring consistent behavior across platforms
• ** Full UI Customization**: Complete control over dialogs, confirmation views, and camera UI
• ** Smart Permission Management**: Unified permission handling with intelligent fallbacks
• ** Performance Optimized**: Efficient image processing and memory management
• ** Developer Friendly**: Simple API with comprehensive error handling

Requirements

Android

• Minimum SDK: 21
• Kotlin 1.8+
• Compose Multiplatform

iOS

• iOS 12.0+
• Xcode 14+
• Kotlin Multiplatform

Desktop

• JDK 11+

Documentation

• Integration Guide - Complete setup and integration guide
• Customization Guide - UI and behavior customization
• Internationalization Guide - Multi-language support guide
• Permissions Guide - Permission handling details
• Coverage Guide - Code coverage and testing guide
• Notifications Setup - Discord notifications setup
• API Reference - Complete API documentation
• Examples - Code examples and use cases

Contributing

Support & Community