Compose | 이미지 컬러 추출하기 (Palette, Coil)

이 블로그 포스팅에서는 Coil을 이용하여 이미지를 로드하면서 배경색 추출을 위해 Palette를 조합하는 방법에 대해 알아보겠습니다. Coil은 이미지를 비트맵으로 쉽게 로드할 수 있도록 도와주며, Palette는 이미지에서 주요 색상 팔레트를 추출하는데 사용됩니다.

 

object PaletteGenerator {

    suspend fun convertImageUrlToBitmap(
        imageUrl: String,
        context: Context
    ): Bitmap? {
        val loader = ImageLoader(context = context)
        val request = ImageRequest.Builder(context = context)
            .data(imageUrl)
            .allowHardware(false)
            .build()
        val imageResult = loader.execute(request = request)
        return if (imageResult is SuccessResult) {
            (imageResult.drawable as BitmapDrawable).bitmap
        } else {
            null
        }
    }

    fun extractColorsFromBitmap(bitmap: Bitmap): Map<String, String> {
        return mapOf(
            "vibrant" to parseColorSwatch(
                color = Palette.from(bitmap).generate().vibrantSwatch
            ),
            "darkVibrant" to parseColorSwatch(
                color = Palette.from(bitmap).generate().darkVibrantSwatch
            ),
            "onDarkVibrant" to parseBodyColor(
                color = Palette.from(bitmap).generate().darkVibrantSwatch?.bodyTextColor
            ),
            "lightVibrant" to parseColorSwatch(
                color = Palette.from(bitmap).generate().lightVibrantSwatch
            ),
            "domainSwatch" to parseColorSwatch(
                color = Palette.from(bitmap).generate().dominantSwatch
            ),
            "mutedSwatch" to parseColorSwatch(
                color = Palette.from(bitmap).generate().mutedSwatch
            ),
            "lightMuted" to parseColorSwatch(
                color = Palette.from(bitmap).generate().lightMutedSwatch
            ),
            "darkMuted" to parseColorSwatch(
                color = Palette.from(bitmap).generate().darkMutedSwatch
            ),
        )
    }

    private fun parseColorSwatch(color: Palette.Swatch?): String {
        return if (color != null) {
            val parsedColor = Integer.toHexString(color.rgb)
            return "#$parsedColor"
        } else {
            "#000000"
        }
    }

    private fun parseBodyColor(color: Int?): String {
        return if (color != null) {
            val parsedColor = Integer.toHexString(color)
            "#$parsedColor"
        } else {
            "#FFFFFF"
        }
    }

}

convertImageUrlToBitmap: 이미지의 URL을 받아 해당 이미지를 비트맵으로 변환하는 함수입니다. 코일(Coil) 라이브러리를 사용하여 이미지를 비트맵으로 로드하고, 성공적으로 로드된 경우 비트맵을 반환합니다.

 

extractColorsFromBitmap: 주어진 비트맵에서 색상 팔레트를 추출하는 함수입니다. Palette 클래스를 사용하여 비트맵에서 vibrant, darkVibrant, lightVibrant, dominantSwatch, mutedSwatch 등 여러 색상 팔레트를 생성하고, 각 팔레트의 색상 정보를 16진수 형식의 문자열로 파싱하여 Map 형태로 반환합니다.

 

• Vibrant Swatch : 이미지에서 가장 활기찬(bright) 주요 색상을 나타냅니다. 일반적으로 이미지에서 가장 눈에 띄는 밝은 색상을 의미합니다.
• Dark Vibrant Swatch : 이미지에서 가장 어두운 부분에 해당하는 주요 활기찬 색상을 나타냅니다. 주로 Vibrant Swatch보다 조금 어두운 톤의 색상을 가리킵니다.
• Light Vibrant Swatch : 이미지에서 가장 밝은 부분에 해당하는 주요 활기찬 색상을 나타냅니다. Vibrant Swatch보다 밝은 톤의 색상을 가리킵니다.
• Muted Swatch : 이미지에서 어두운, 흐린 톤의 주요 색상을 나타냅니다. 일반적으로 Vibrant Swatch보다 색상이 덜 선명합니다.
• Dark Muted Swatch : 이미지에서 가장 어두운 부분에 해당하는 주요 어두운 색상을 나타냅니다. Muted Swatch보다 더 어두운 톤의 색상을 가리킵니다.
• Light Muted Swatch : 이미지에서 가장 밝은 부분에 해당하는 주요 어두운 색상을 나타냅니다. Muted Swatch보다 더 밝은 톤의 색상을 가리킵니다.