Arbeiten mit Bildern: resize und crop in Kotlin

Arbeiten mit Bildern in Kotlin: resize und crop mit der Bibliothek Kamel

\n\n

In der modernen Entwicklung für Android und plattformübergreifende Projekte mit Kotlin besteht häufig die Notwendigkeit, Bilder programmatisch in der Größe zu ändern (resize) und zuzuschneiden (crop). Dies wird benötigt, um das Laden zu optimieren, Vorschaubilder zu erstellen, sie an verschiedene Bildschirme anzupassen oder Bilder für den Versand an einen Server vorzubereiten. In diesem Artikel betrachten wir die Bibliothek Kamel – ein leistungsstarkes Werkzeug für die Bildverarbeitung, das in reinem Kotlin geschrieben ist und Multiplattform unterstützt.

\n\n

Was ist Kamel?

\n\n

Kamel (Kotlin Asynchronous Media Loading) ist eine Bibliothek zum Laden, Caching und Verarbeiten von Bildern, die speziell für Kotlin Multiplatform entwickelt wurde. Sie bietet eine einfache API für Operationen wie resize und crop, ohne dass schwere Frameworks wie Glide oder Picasso eingebunden werden müssen. Kamel unterstützt Android, iOS, JVM und JavaScript, was es zur idealen Wahl für plattformübergreifende Projekte macht.

\n\n

Die Installation der Bibliothek erfolgt über Gradle:

\n\n

// build.gradle.kts (commonMain)\nimplementation("media.kamel:kamel-image:1.0.0")

\n\n

Größenänderung eines Bildes (resize)

\n\n

Die Operation resize ermöglicht es, die ursprünglichen Abmessungen eines Bildes auf eine bestimmte Breite und Höhe zu ändern. In Kamel wird dies über die Funktion resize() realisiert, die die Zielgrößen und den Skalierungsmodus (scale mode) akzeptiert.

\n\n

Beispiel für eine grundlegende Größenänderung:

\n\n

import androidx.compose.runtime.*\nimport media.kamel.image.loadImage\nimport media.kamel.image.resizer.*\n\n@Composable\nfun ResizedImage() {\n    val image = loadImage(\n        data = "https://example.com/photo.jpg",\n        resizer = Resizer(\n            width = 300,\n            height = 200,\n            scaleMode = ScaleMode.Fit\n        )\n    )\n    // Anzeige des image im Image composable\n}

\n\n

In diesem Beispiel wird das Bild auf 300x200 Pixel skaliert, wobei das Seitenverhältnis beibehalten wird (ScaleMode.Fit). Wenn das Bild ohne Beibehaltung des Seitenverhältnisses gestreckt werden soll, verwenden Sie ScaleMode.Fill oder ScaleMode.Crop (letzteres schneidet die Ränder automatisch ab).

\n\n

Zuschneiden eines Bildes (crop)

\n\n

Crop ermöglicht das Ausschneiden eines rechteckigen Bereichs aus dem Originalbild. In Kamel kann das Zuschneiden auf zwei Arten erfolgen:

\n\n

Über ScaleMode.Crop – automatischer Zuschnitt beim Skalieren;
Durch manuelle Angabe einer Region – mit der Klasse ImageRegion.

\n\n

Beispiel für manuelles Zuschneiden:

\n\n

import media.kamel.image.loadImage\nimport media.kamel.image.cropper.*\n\n@Composable\nfun CroppedImage() {\n    val image = loadImage(\n        data = "https://example.com/photo.jpg",\n        cropper = Cropper(\n            region = ImageRegion(\n                left = 50,\n                top = 50,\n                width = 200,\n                height = 150\n            )\n        )\n    )\n    // Anzeige des zugeschnittenen Bildes\n}

\n\n

Hier wird aus dem Bild ein Bereich ausgeschnitten, der bei den Koordinaten (50, 50) beginnt und eine Größe von 200x150 Pixeln hat. Dies ist nützlich, wenn ein bestimmter Teil extrahiert werden soll, z. B. ein Gesicht auf einem Foto.

\n\n

Kombination von resize und crop

\n\n

Häufig müssen beide Operationen nacheinander ausgeführt werden: zuerst zuschneiden, dann die Größe ändern. Kamel ermöglicht die Kombination durch eine Aufrufkette:

\n\n

@Composable\nfun CombinedProcessing() {\n    val image = loadImage(\n        data = "https://example.com/photo.jpg",\n        resizer = Resizer(width = 400, height = 300, scaleMode = ScaleMode.Fit),\n        cropper = Cropper(region = ImageRegion(100, 100, 600, 450))\n    )\n}

\n\n

Reihenfolge der Ausführung: Zuerst wird