Jetpack Compose无需AndroidView实现网络图片加载绘制与保存

你的问题核心在于：Compose的Canvas仅负责在UI界面上渲染绘制内容，不会修改原始的Bitmap对象，所以点击保存时你存储的还是最初加载的原图。要实现保存修改后的图片，需要手动创建新的Bitmap，将原图和自定义绘制内容都绘制到这个新Bitmap上，再保存这个修改后的副本。

核心解决步骤 #

1. 统一记录所有自定义绘制的参数（比如圆的位置、颜色、半径），确保UI预览和最终保存的内容一致
2. 点击保存时，基于原始Bitmap创建可编辑的副本
3. 使用Android原生Canvas（非Compose的Canvas）将自定义内容绘制到副本Bitmap上
4. 保存这个修改后的副本Bitmap

修改后的完整代码 #

import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Paint
import android.os.Environment
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.unit.dp
import androidx.core.graphics.drawable.toBitmap
import coil.ImageLoader
import coil.request.ImageRequest
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext
import java.io.File
import java.io.FileOutputStream

// 统一管理绘制参数，确保预览和保存内容一致
data class DrawParams(
    val circleColor: Color = Color.Red,
    val circleRadius: Float = 40f,
    val circleCenter: androidx.compose.ui.geometry.Offset = androidx.compose.ui.geometry.Offset(50f, 50f)
)

@Composable
fun LoadImageAndSave(
    imageUrl: String
) {
    var originalBitmap by remember { mutableStateOf<Bitmap?>(null) }
    val drawParams = remember { mutableStateOf(DrawParams()) }
    val context = androidx.compose.ui.platform.LocalContext.current
    val imageLoader = ImageLoader(context)

    val request = ImageRequest.Builder(context)
        .data(imageUrl)
        .target { result ->
            originalBitmap = result.toBitmap()
        }
        .build()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        LaunchedEffect(request) {
            withContext(Dispatchers.IO) {
                imageLoader.execute(request)
            }
        }

        // Compose Canvas仅用于实时预览绘制效果
        Canvas(
            modifier = Modifier
                .fillMaxSize()
        ) {
            originalBitmap?.let { bitmap ->
                drawImage(bitmap.asImageBitmap())
                // 使用统一参数绘制预览
                drawCircle(
                    color = drawParams.value.circleColor,
                    radius = drawParams.value.circleRadius,
                    center = drawParams.value.circleCenter
                )
            }
        }

        Button(
            onClick = {
                originalBitmap?.let { original ->
                    val modifiedBitmap = createModifiedBitmap(original, drawParams.value)
                    saveImage(modifiedBitmap)
                    // 回收临时Bitmap，避免内存泄漏
                    modifiedBitmap.recycle()
                }
            },
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 16.dp)
        ) {
            Text("Save Image")
        }
    }
}

// 创建修改后的Bitmap：将原图和自定义内容绘制到新Bitmap上
private fun createModifiedBitmap(originalBitmap: Bitmap, drawParams: DrawParams): Bitmap {
    // 创建与原图尺寸、配置一致的可编辑副本
    val modifiedBitmap = originalBitmap.copy(originalBitmap.config, true)
    val canvas = Canvas(modifiedBitmap)

    // 绘制自定义内容（以圆形为例）
    val paint = Paint().apply {
        color = drawParams.circleColor.toArgb()
        style = Paint.Style.FILL
        isAntiAlias = true
    }
    canvas.drawCircle(
        drawParams.circleCenter.x,
        drawParams.circleCenter.y,
        drawParams.circleRadius,
        paint
    )

    return modifiedBitmap
}

private fun saveImage(finalBitmap: Bitmap) {
    val destination = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS).absolutePath
    val myDir = File("$destination/my_images")
    myDir.mkdirs()
    val fname = "Image-${System.currentTimeMillis()}.jpg"
    val file = File(myDir, fname)
    if (file.exists()) file.delete()
    try {
        FileOutputStream(file).use { out ->
            finalBitmap.compress(Bitmap.CompressFormat.JPEG, 100, out)
        }
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

关键说明 #

• 统一绘制参数：用DrawParams类管理所有自定义绘制属性，保证预览和保存的内容完全匹配
• 离线绘制Bitmap：通过Android原生Canvas在新Bitmap上完成绘制，让修改内容持久化到Bitmap中
• 内存优化：保存完成后回收临时Bitmap，避免不必要的内存占用

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