使用Glide/Coil加载网络图片转ImageBitmap传入Compose Canvas

针对你的MyCanvas组件需要ImageBitmap参数的需求，以下是具体实现方案，以及Glide和Coil的选型建议：

一、使用Coil实现（Jetpack Compose优先推荐） #

Coil是专为Kotlin和Compose设计的图片加载库，对Compose的适配更原生，能直接获取ImageBitmap，步骤更简洁：

1. 添加依赖 #

在Module级别的build.gradle中引入Coil的Compose依赖：

implementation("io.coil-kt:coil-compose:2.5.0")

2. 加载图片并传入MyCanvas #

通过rememberAsyncImagePainter异步加载图片，直接将成功结果转换为ImageBitmap：

@ExperimentalComposeUiApi
@Composable
fun MyScreen() {
    val imageUrl = "https://your-server-url/image.jpg"
    
    // 初始化图片加载器，可配置缓存、淡入效果等
    val painter = rememberAsyncImagePainter(
        model = imageUrl,
        imageLoader = ImageLoader(LocalContext.current) {
            crossfade(true)
            diskCachePolicy(DiskCachePolicy.ENABLED)
        }
    )
    
    when (val state = painter.state) {
        is AsyncImagePainter.State.Loading -> {
            // 加载中UI
            CircularProgressIndicator(modifier = Modifier.size(40.dp))
        }
        is AsyncImagePainter.State.Success -> {
            // 将Drawable转换为ImageBitmap并传入组件
            MyCanvas(myImage = state.result.drawable.toImageBitmap())
        }
        is AsyncImagePainter.State.Error -> {
            // 加载失败UI
            Text(text = "图片加载失败", color = Color.Red)
        }
        else -> Unit
    }
}

toImageBitmap()是Compose内置的扩展函数，无需手动处理Bitmap到ImageBitmap的转换逻辑。

二、使用Glide实现 #

若项目已有Glide依赖，可通过以下方式实现图片加载与转换：

1. 添加依赖 #

implementation("com.github.bumptech.glide:glide:4.16.0")
kapt("com.github.bumptech.glide:compiler:4.16.0")
implementation("com.github.bumptech.glide:compose:1.0.0")

2. 加载并转换图片 #

利用LaunchedEffect执行异步加载，将获取到的Bitmap转换为ImageBitmap：

@ExperimentalComposeUiApi
@Composable
fun MyScreen() {
    val imageUrl = "https://your-server-url/image.jpg"
    val context = LocalContext.current
    val imageBitmap = remember { mutableStateOf<ImageBitmap?>(null) }

    LaunchedEffect(imageUrl) {
        // 异步加载Bitmap
        val bitmap = runCatching {
            Glide.with(context)
                .asBitmap()
                .load(imageUrl)
                .submit()
                .get()
        }.getOrNull()
        
        // 转换为ImageBitmap
        bitmap?.let {
            imageBitmap.value = it.asImageBitmap()
        }
    }

    imageBitmap.value?.let {
        MyCanvas(myImage = it)
    } ?: run {
        CircularProgressIndicator(modifier = Modifier.size(40.dp))
    }
}

三、Glide vs Coil选型建议 #

• 优先选择Coil：它的API完全贴合Compose的声明式风格，代码更简洁，内置对ImageBitmap的支持，无需额外手动转换，库体积也更小，是Compose场景下的首选。
• Glide适用场景：如果项目已深度依赖Glide，或者需要使用Glide成熟的自定义变换、复杂缓存策略等高级特性，可以继续使用，但在Compose中的使用步骤比Coil繁琐。

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