العمل مع الصور: تغيير الحجم والقص في Kotlin

العمل مع الصور في Kotlin: تغيير الحجم والقص باستخدام مكتبة Kamel

\n\n

في التطوير الحديث لتطبيقات Android والمشاريع متعددة المنصات باستخدام Kotlin، غالبًا ما تنشأ الحاجة إلى تغيير حجم الصور (resize) وقصها (crop) برمجيًا. هذا مطلوب لتحسين التحميل، وإنشاء الصور المصغرة، والتكيف مع الشاشات المختلفة، أو تجهيز الصور للإرسال إلى الخادم. في هذه المقالة، سنستعرض مكتبة Kamel - وهي أداة قوية للعمل مع الصور، مكتوبة بلغة Kotlin النقية وتدعم التعددية المنصات.

\n\n

ما هي Kamel؟

\n\n

Kamel (Kotlin Asynchronous Media Loading) هي مكتبة لتحميل الصور وتخزينها مؤقتًا ومعالجتها، تم إنشاؤها خصيصًا لـ Kotlin Multiplatform. توفر واجهة برمجة تطبيقات (API) بسيطة لتنفيذ عمليات مثل resize و crop، دون الحاجة إلى ربط أطر عمل ثقيلة مثل Glide أو Picasso. تدعم Kamel أنظمة Android و iOS و JVM و JavaScript، مما يجعلها الخيار الأمثل للمشاريع عبر المنصات.

\n\n

يتم تثبيت المكتبة عبر Gradle:

\n\n

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

\n\n

تغيير حجم الصورة (resize)

\n\n

تتيح عملية resize تغيير الأبعاد الأصلية للصورة إلى عرض وارتفاع محددين. في Kamel، يتم ذلك من خلال الدالة resize() التي تأخذ الأبعاد المستهدفة وطريقة القياس (scale mode).

\n\n

مثال على تغيير الحجم الأساسي:

\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    // عرض الصورة في Image composable\n}

\n\n

في هذا المثال، سيتم قياس الصورة إلى 300x200 بكسل مع الحفاظ على نسب الأبعاد (ScaleMode.Fit). إذا كنت بحاجة إلى تمديد الصورة دون الحفاظ على النسب، استخدم ScaleMode.Fill أو ScaleMode.Crop (الأخير يقوم بقص الحواف تلقائيًا).

\n\n

قص الصورة (crop)

\n\n

يسمح Crop بقص منطقة مستطيلة من الصورة الأصلية. في Kamel، يمكن إجراء القص بطريقتين:

\n\n

عبر ScaleMode.Crop - قص تلقائي أثناء القياس؛
عبر التحديد اليدوي للمنطقة - باستخدام الفئة ImageRegion.

\n\n

مثال على القص اليدوي:

\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    // عرض الصورة المقصوصة\n}

\n\n

هنا، يتم قص منطقة من الصورة تبدأ من الإحداثيات (50, 50) ويبلغ حجمها 200x150 بكسل. هذا مفيد عندما تحتاج إلى استخراج جزء معين، مثل وجه في صورة.

\n\n

الجمع بين تغيير الحجم والقص

\n\n

غالبًا ما يكون مطلوبًا تنفيذ كلتا العمليتين بالتتابع: القص أولاً، ثم تغيير الحجم. تسمح Kamel بدمجهما من خلال سلسلة من الاستدعاءات:

\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

ترتيب التنفيذ: يتم تطبيق القص أولاً