시배's Android
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보다 더 밝은 톤의 색상을 가리킵니다.
'Android > Compose' 카테고리의 다른 글
Compose | Side Effects (0) | 2023.09.06 |
---|---|
Compose | ViewCompositionStrategy (0) | 2023.08.16 |
Compose | Compose LazyColumn에서 FadingEdge 구현하기 (0) | 2023.07.26 |
Compose | Hilt를 사용하고 있을 경우 activity 가져오기 (0) | 2023.07.16 |
Compose | 컴포즈 커스텀 레이아웃 구현하기 (1) | 2023.07.16 |