Compose Multiplatform中如何将Base64转换为Bitmap？

方法一：手动实现跨平台Base64解码与图片转换 #

借助Kotlin的expect/actual机制实现跨平台Base64解码，再转换为Compose通用的ImageBitmap：

1. 定义跨平台解码接口 #

在common模块创建工具类，声明Base64解码的期望函数：

// commonMain/kotlin/Base64Utils.kt
expect fun decodeBase64(encodedString: String): ByteArray

2. 各平台实现解码逻辑 #

Android平台

// androidMain/kotlin/Base64Utils.kt
import android.util.Base64
actual fun decodeBase64(encodedString: String): ByteArray {
    return Base64.decode(encodedString, Base64.URL_SAFE)
}

iOS平台

// iosMain/kotlin/Base64Utils.kt
import platform.Foundation.NSData
actual fun decodeBase64(encodedString: String): ByteArray {
    val nsData = NSData.initWithBase64EncodedStringOptions(
        encodedString,
        0 // 兼容URL安全格式的Base64
    ) ?: error("Invalid Base64 string")
    return nsData.toByteArray()
}

Desktop（JVM）平台

// desktopMain/kotlin/Base64Utils.kt
import java.util.Base64
actual fun decodeBase64(encodedString: String): ByteArray {
    return Base64.getUrlDecoder().decode(encodedString)
}

3. 转换为Compose ImageBitmap #

在common模块中，利用Compose内置方法将字节数组转为可渲染的图片对象：

import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.imageFromByteArray

fun base64ToImageBitmap(base64String: String): ImageBitmap? {
    return runCatching {
        val byteArray = decodeBase64(base64String)
        ImageBitmap.makeFromEncoded(byteArray)
    }.getOrNull()
}

4. 在Compose中使用 #

@Composable
fun Base64Image(base64String: String) {
    val imageBitmap = base64ToImageBitmap(base64String)
    imageBitmap?.let {
        Image(
            bitmap = it,
            contentDescription = "Base64 converted image",
            modifier = Modifier.size(200.dp)
        )
    } ?: Text(text = "Failed to load image")
}

方法二：使用Coil Compose Multiplatform简化操作 #

Coil是跨平台图片加载库，支持直接解析Base64字符串，无需手动处理解码：

1. 添加依赖 #

在common模块的build.gradle.kts中引入Coil：

// commonMain dependencies
implementation("io.coil-kt:coil-compose-multiplatform:2.5.0")

2. 加载Base64图片 #

构造符合Data URI规范的地址，直接用AsyncImage加载：

import coil.compose.AsyncImage

@Composable
fun CoilBase64Image(base64String: String) {
    // 根据图片实际格式调整image/png部分（如image/jpeg）
    val imageUri = "data:image/png;base64,$base64String"
    AsyncImage(
        model = imageUri,
        contentDescription = "Base64 image loaded via Coil",
        modifier = Modifier.size(200.dp),
        error = { Text(text = "Image load failed") }
    )
}

内容的提问来源于stack exchange，提问作者Shoaib Kakal