ネットワークからの画像読み込み【Jetpack Compose (Desktop)】

バージョン情報

plugins {
    kotlin("jvm") version "1.4.20"
    id("org.jetbrains.compose") version "0.2.0-build132"
}

以下のようにImageBitmapに変換して返す関数を作成しました。ついでにキャッシュもしてみました。

object ImageUtil {
    private val cache = mutableMapOf<String, ImageBitmap>()

    @Composable
    fun imageFromUrl(url: String): ImageBitmap {
        val imageBitmap = remember { mutableStateOf(ImageBitmap(1, 1)) }

        LaunchedEffect(url) {
            imageBitmap.value = when (val cacheHit = cache[url]) {
                null -> {
                    withContext(Dispatchers.IO) {
                        val image = org.jetbrains.skija.Image.makeFromEncoded(URL(url).readBytes())
                        val bitmap = image.asImageBitmap()
                        cache[url] = bitmap
                        bitmap
                    }
                }
                else -> cacheHit
            }
        }

        return imageBitmap.value
    }
}

使用例。

fun main() = Window {
    MaterialTheme {
        val iconUrls = remember { mutableStateOf(listOf<String>()) }
        Column {
            Column {
                Button(
                    onClick = {
                        iconUrls.value = iconUrls.value
                            .plus("https://replace.to.icon.url")
                    }
                ) {
                    Text(text = "add list")
                }
            }

            LazyColumnFor(
                modifier = Modifier.fillMaxSize(),
                items = iconUrls.value
            ) { url ->
                Column(
                    modifier = Modifier.height(200.dp)
                ) {
                    Image(
                        modifier = Modifier
                            .width(64.dp)
                            .height(64.dp),
                        bitmap = ImageUtil.imageFromUrl(url),
                    )
                }
            }
        }
    }
}