如何在Jetpack Compose中将Canvas导出为PNG图片并保存至相册？

问题分析 #

你当前的代码仅在Compose的Canvas组件上绘制内容，但没有将**整个Canvas的所有绘制结果（包括原图和添加的特效）**导出为可保存的Bitmap对象。resizedBitmap只是原图缩放后的实例，并未包含后续绘制的矩形等特效，因此无法保存完整的编辑结果。

解决方案 #

要实现保存功能，需要通过离屏Canvas绘制所有内容，生成包含全部特效的Bitmap，再将Bitmap保存为PNG文件到本地存储。以下是分步实现方案：

1. 创建离屏Canvas绘制完整内容 #

将所有绘制操作转移到离屏的android.graphics.Canvas和Bitmap上，这样就能获取包含所有编辑效果的完整Bitmap。

2. 实现Bitmap保存为PNG的逻辑 #

根据Android版本适配存储方式（Android 10+使用MediaStore，旧版本直接操作文件），并处理媒体库更新。

3. 处理存储权限 #

根据Android版本请求对应的存储权限，确保保存操作能正常执行。

完整代码示例 #

保存Bitmap到PNG的工具函数 #

import android.content.ContentValues
import android.content.Context
import android.graphics.Bitmap
import android.os.Build
import android.os.Environment
import android.provider.MediaStore
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext
import java.io.File
import java.io.FileOutputStream
import java.io.OutputStream

private suspend fun saveBitmapToPng(bitmap: Bitmap, context: Context) = withContext(Dispatchers.IO) {
    val fileName = "edited_image_${System.currentTimeMillis()}.png"
    var outputStream: OutputStream? = null

    try {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            // Android 10+ 采用MediaStore存储
            val contentValues = ContentValues().apply {
                put(MediaStore.Images.Media.DISPLAY_NAME, fileName)
                put(MediaStore.Images.Media.MIME_TYPE, "image/png")
                put(MediaStore.Images.Media.RELATIVE_PATH, "${Environment.DIRECTORY_PICTURES}/ImageEditor")
            }

            context.contentResolver.insert(
                MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                contentValues
            )?.let { uri ->
                outputStream = context.contentResolver.openOutputStream(uri)
            }
        } else {
            // Android 9及以下直接操作文件
            val picturesDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES)
            val appDir = File(picturesDir, "ImageEditor")
            if (!appDir.exists()) appDir.mkdirs()

            val file = File(appDir, fileName)
            outputStream = FileOutputStream(file)

            // 通知媒体库更新文件
            android.media.MediaScannerConnection.scanFile(
                context,
                arrayOf(file.path),
                arrayOf("image/png"),
                null
            )
        }

        outputStream?.let {
            bitmap.compress(Bitmap.CompressFormat.PNG, 100, it)
        }
    } catch (e: Exception) {
        e.printStackTrace()
    } finally {
        outputStream?.close()
    }
}

修改后的Compose Canvas与保存逻辑 #

import android.Manifest
import android.content.Context
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.os.Build
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
import androidx.core.content.ContextCompat
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@Composable
fun ImageEditorCanvas(originalBitmap: Bitmap) {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()
    val editedBitmap = remember { mutableStateOf<Bitmap?>(null) }

    // 权限请求Launcher
    val requestPermissionLauncher = rememberLauncherForActivityResult(
        ActivityResultContracts.RequestPermission()
    ) { isGranted ->
        if (isGranted) {
            editedBitmap.value?.let {
                scope.launch { saveBitmapToPng(it, context) }
            }
        }
    }

    // 保存按钮
    Button(
        onClick = {
            val hasPermission = when {
                Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU -> {
                    ContextCompat.checkSelfPermission(
                        context,
                        Manifest.permission.READ_MEDIA_IMAGES
                    ) == android.content.pm.PackageManager.PERMISSION_GRANTED
                }
                Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q -> true
                else -> {
                    ContextCompat.checkSelfPermission(
                        context,
                        Manifest.permission.WRITE_EXTERNAL_STORAGE
                    ) == android.content.pm.PackageManager.PERMISSION_GRANTED
                }
            }

            if (hasPermission) {
                editedBitmap.value?.let {
                    scope.launch { saveBitmapToPng(it, context) }
                }
            } else {
                val permission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
                    Manifest.permission.READ_MEDIA_IMAGES
                } else {
                    Manifest.permission.WRITE_EXTERNAL_STORAGE
                }
                requestPermissionLauncher.launch(permission)
            }
        }
    ) {
        Text("保存编辑后的图片")
    }

    // 绘制Canvas内容并生成可保存的Bitmap
    Canvas(modifier = Modifier.fillMaxSize(0.75f)) {
        val canvasWidth = size.width.toInt()
        val canvasHeight = size.height.toInt()

        // 创建离屏Bitmap和Canvas
        val offscreenBitmap = Bitmap.createBitmap(canvasWidth, canvasHeight, Bitmap.Config.ARGB_8888)
        val offscreenCanvas = Canvas(offscreenBitmap)

        // 绘制缩放后的原图
        val scaledBitmap = Bitmap.createScaledBitmap(
            originalBitmap,
            (canvasWidth * 0.8).toInt(),
            (canvasHeight * 0.8).toInt(),
            true
        )
        val dstX = (canvasWidth - scaledBitmap.width) / 2
        val dstY = (canvasHeight - scaledBitmap.height) / 2
        offscreenCanvas.drawBitmap(scaledBitmap, dstX.toFloat(), dstY.toFloat(), null)

        // 绘制矩形特效
        val blackPaint = Paint().apply { color = Color.BLACK }
        offscreenCanvas.drawRect(
            0f, 0f, (canvasWidth / 2).toFloat(), canvasHeight.toFloat(), blackPaint
        )

        val whitePaint = Paint().apply { color = Color.WHITE }
        offscreenCanvas.drawRect(
            (canvasWidth / 2).toFloat(), 0f, canvasWidth.toFloat(), canvasHeight.toFloat(), whitePaint
        )

        // 保存完整编辑后的Bitmap
        editedBitmap.value = offscreenBitmap

        // 在Compose Canvas上显示绘制结果
        drawImage(offscreenBitmap.asImageBitmap())
    }
}

权限配置（AndroidManifest.xml） #

<!-- Android 13+ 读取媒体权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

<!-- Android 12及以下 读取存储权限 -->
<uses-permission
    android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />

<!-- Android 9及以下 写入存储权限 -->
<uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="29" />

内容的提问来源于stack exchange，提问作者Hamdy Abd El Fattah