Jetpack Compose-拍照及图片保存及剪裁

拍照组件

import android.annotation.SuppressLint
import android.content.ContentValues
import android.content.Context
import android.graphics.Bitmap
import android.graphics.ImageDecoder
import android.os.Build
import android.provider.MediaStore
import android.util.Log
import androidx.camera.core.CameraSelector
import androidx.camera.core.ImageCapture
import androidx.camera.core.ImageCaptureException
import androidx.camera.core.Preview
import androidx.camera.lifecycle.ProcessCameraProvider
import androidx.camera.view.PreviewView
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.graphics.painter.BitmapPainter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.core.content.ContextCompat
import androidx.lifecycle.LifecycleOwner
import com.xhkjedu.zxs_android.R
import com.xhkjedu.zxs_android.common.CommonTheme
import com.xhkjedu.zxs_android.componts.ZImgLocalBg
import com.xhkjedu.zxs_android.componts.ZTextColorSizeComp
import com.xhkjedu.zxs_android.utils.BitmapUtils
import java.text.SimpleDateFormat
import java.util.Locale
import java.util.concurrent.ExecutorService
import java.util.concurrent.Executors

@Composable
fun ZCameraComp(cancelAction: () -> Unit, okAction: (String) -> Unit) {
    val TAG = "CameraComp"
    val context = LocalContext.current
    val lifecycleOwner = androidx.lifecycle.compose.LocalLifecycleOwner.current
    val previewView = remember { PreviewView(context) }
    var capturedImage by remember { mutableStateOf<Bitmap?>(null) }
    val isTakingPhoto = remember { mutableStateOf(false) }
    // 用于存储ImageCapture实例的变量
    val imageCaptureInstance = remember { mutableStateOf<ImageCapture?>(null) }
    // 创建相机执行器
    val cameraExecutor = remember { Executors.newSingleThreadExecutor() }

    val leftRightSpace = 120.dp

    var leftRate by remember { mutableStateOf(0f) }
    var topRate by remember { mutableStateOf(0f) }
    var widthRate by remember { mutableStateOf(0f) }
    var heightRate by remember { mutableStateOf(0f) }

    // 初始化相机
    LaunchedEffect(Unit) {
        startCamera(previewView, context, imageCaptureInstance, lifecycleOwner, cameraExecutor)
    }
    // 释放相机资源
    DisposableEffect(Unit) {
        onDispose {
            cameraExecutor.shutdown()
        }
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)

    ) {
        // 相机预览

        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(start = leftRightSpace, end = leftRightSpace)
                .clip(RectangleShape)
        ) {
            AndroidView(
                factory = {
                    // 设置 PreviewView 的布局参数，使其填充父容器
                    previewView.layoutParams = android.view.ViewGroup.LayoutParams(
                        android.view.ViewGroup.LayoutParams.MATCH_PARENT,
                        android.view.ViewGroup.LayoutParams.MATCH_PARENT
                    )
                    previewView
                },
                modifier = Modifier
                    .fillMaxSize()
            )
        }

        Box(
            Modifier
                .fillMaxSize()
                .background(Color(0x66000000))
        ) {

            Box(
                Modifier
                    .width(520.dp)
                    .height(360.dp)
                    .border(width = 3.dp, Color.White, shape = CommonTheme.CornerM)
                    .align(Alignment.Center),
                contentAlignment = Alignment.Center
            ) {
                ZTextColorSizeComp("将作答内容放在屏幕中央", Color.White, 30.sp)
            }



            Box(
                Modifier
                    .width(leftRightSpace)
                    .fillMaxHeight()
                    .align(Alignment.CenterEnd)
            ) {

                Box(
                    Modifier
                        .size(70.dp)
                        .align(Alignment.TopCenter)
                        .offset(y = (70).dp)
                        .clickable {
                            cancelAction()
                        }
                ) {
                    ZImgLocalBg(R.drawable.camera_guanbi)
                }
                Box(
                    Modifier
                        .size(100.dp)
                        .align(Alignment.Center)
                        .clickable {
                            if (isTakingPhoto.value) {
                                return@clickable
                            }
                            isTakingPhoto.value = true
                            takePhoto(
                                context = context,
                                imageCapture = imageCaptureInstance.value,
                                cameraExecutor = cameraExecutor,
                                onImageCaptured = { bitmap ->
                                    capturedImage = bitmap
                                }
                            )
                        }
                ) {
                    ZImgLocalBg(R.drawable.camera_paizhao)
                }

                Box(
                    Modifier
                        .size(70.dp)
                        .align(Alignment.BottomCenter)
                        .offset(y = (-70).dp)
                ) {
                    ZImgLocalBg(R.drawable.camera_xuanzhuan)
                }

            }

        }


    }

    capturedImage?.let {
        isTakingPhoto.value = false
        Log.i(TAG, "width: " + it.width)
        Log.i(TAG, "height: " + it.height)
        Box(
            modifier = Modifier
                .fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(start = leftRightSpace, end = leftRightSpace)
            ) {
                Image(
                    painter = BitmapPainter(
                        it.asImageBitmap()
                    ),
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xaa000000)),
                    contentScale = ContentScale.Crop,
                    contentDescription = "显示Bitmap图片"
                )
                ZResizeBoxComp() { left: Float, top: Float, width: Float, height: Float ->
                    Log.i(TAG, "ResizableBox width: " + width)
                    Log.i(TAG, "ResizableBox height: " + height)

                    leftRate = left
                    topRate = top
                    widthRate = width
                    heightRate = height

                }

            }

            Box(
                Modifier
                    .width(leftRightSpace)
                    .fillMaxHeight()
                    .background(Color.Black)
                    .align(Alignment.CenterEnd),
                contentAlignment = Alignment.Center
            ) {

                Column {
                    Box(
                        Modifier
                            .size(70.dp)
                            .clickable {
                                capturedImage = null
                            }
                    ) {
                        ZImgLocalBg(R.drawable.camera_guanbi)
                    }

                    Spacer(Modifier.height(160.dp))
                    Box(
                        Modifier
                            .size(70.dp)
                            .clickable {
                                val img =
                                    BitmapUtils.saveBitmapCropToFile(
                                        it,
                                        context,
                                        leftRate,
                                        topRate,
                                        widthRate,
                                        heightRate
                                    )
                                img?.let {
                                    Log.i(TAG, "CameraComp: ${img?.absolutePath}")
                                    okAction(img.absolutePath)
                                }

                            }

                    ) {
                        ZImgLocalBg(R.drawable.camera_queding)
                    }
                }


            }
        }


    }
}

private fun startCamera(
    previewView: PreviewView,
    context: Context,
    imageCaptureInstance: MutableState<ImageCapture?>,
    lifecycleOwner: LifecycleOwner,
    cameraExecutor: ExecutorService
) {
    val cameraProviderFuture = ProcessCameraProvider.getInstance(context)

    cameraProviderFuture.addListener({
        val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()

        // 预览用例
        val preview = Preview.Builder()
            .build()
            .also {
                it.surfaceProvider = previewView.surfaceProvider
            }
        previewView.scaleType = PreviewView.ScaleType.FILL_CENTER
        // 图像捕获用例
        val imageCapture = ImageCapture.Builder()
            .build()

        imageCaptureInstance.value = imageCapture

        // 选择后置摄像头
        val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA

        try {
            // 解绑所有先前绑定的用例
            cameraProvider.unbindAll()

            // 绑定相机和用例
            cameraProvider.bindToLifecycle(
                lifecycleOwner, cameraSelector, preview, imageCapture
            )

        } catch (exc: Exception) {
            Log.e("CameraX", "使用相机时发生错误", exc)
        }

    }, ContextCompat.getMainExecutor(context))
}

private fun takePhoto(
    context: Context,
    imageCapture: ImageCapture?,
    cameraExecutor: ExecutorService,
    onImageCaptured: (Bitmap) -> Unit
) {
    // 获取ImageCapture实例
    val imageCapture = imageCapture ?: return

    // 创建带时间戳的文件名
    val name = SimpleDateFormat("yyyy-MM-dd-HH-mm-ss-SSS", Locale.US)
        .format(System.currentTimeMillis())

    // 创建内容值
    val contentValues = ContentValues().apply {
        put(MediaStore.MediaColumns.DISPLAY_NAME, name)
        put(MediaStore.MediaColumns.MIME_TYPE, "image/jpeg")
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
            put(MediaStore.Images.Media.RELATIVE_PATH, "Pictures/CameraX-Image")
        }
    }

    // 创建输出选项对象
    val outputOptions = ImageCapture.OutputFileOptions
        .Builder(
            context.contentResolver,
            MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
            contentValues
        )
        .build()

    // 拍摄照片
    imageCapture.takePicture(
        outputOptions,
        ContextCompat.getMainExecutor(context),
        object : ImageCapture.OnImageSavedCallback {
            override fun onError(exc: ImageCaptureException) {
                Log.e("CameraX", "拍照失败: ${exc.message}", exc)
            }

            @SuppressLint("ObsoleteSdkInt")
            @Suppress("DEPRECATION")
            override fun onImageSaved(output: ImageCapture.OutputFileResults) {
                val savedUri = output.savedUri ?: return

                // 将保存的URI转换为Bitmap
                val bitmap = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
                    val source = ImageDecoder.createSource(context.contentResolver, savedUri)
                    ImageDecoder.decodeBitmap(source)
                } else {
                    MediaStore.Images.Media.getBitmap(context.contentResolver, savedUri)
                }
                onImageCaptured(bitmap)
                Log.d("CameraX", "照片已保存到: $savedUri")
            }
        }
    )
}

Bitmap剪裁

import android.content.Context
import android.graphics.Bitmap
import android.os.Environment
import java.io.File
import java.io.FileOutputStream
import java.io.IOException
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

object BitmapUtils {
    /**
     * 将 Bitmap 保存为临时 JPEG 文件
     */
    fun saveBitmapToFile(bitmap: Bitmap, context: Context): File? {
        val timeStamp = SimpleDateFormat("yyyyMMddHHmmssSSS", Locale.getDefault()).format(Date())
        return try {
            // 创建临时文件
            val tempFile = File.createTempFile(
                timeStamp,
                ".jpg",
                context.getExternalFilesDir(Environment.DIRECTORY_PICTURES)
            )

            // 压缩并保存 Bitmap 到文件
            FileOutputStream(tempFile).use { out ->
                bitmap.compress(Bitmap.CompressFormat.JPEG, 80, out) // 质量 80%
            }

            tempFile
        } catch (e: IOException) {
            e.printStackTrace()
            null
        }
    }

    fun saveBitmapCropToFile(
        bitmap: Bitmap,
        context: Context,
        leftRate: Float,
        topRate: Float,
        widthRate: Float,
        heightRate: Float,
    ): File? {
        val left = bitmap.width * leftRate
        val top = bitmap.height * topRate
        val width = bitmap.width * widthRate
        val height = bitmap.height * heightRate
        val cropBitmap =
            Bitmap.createBitmap(bitmap, left.toInt(), top.toInt(), width.toInt(), height.toInt())
        return saveBitmapToFile(cropBitmap, context)
    }
}

调用

val img = BitmapUtils.saveBitmapCropToFile(
    it,
    context,
    leftRate,
    topRate,
    widthRate,
    heightRate
)
img?.let {
    Log.i(TAG, "CameraComp: ${img?.absolutePath}")
}

在线图片剪裁

如果要剪裁在线的图片，我们要做如下环节

• 图片下载到本地
• 加载本地图片为Bitmap
• 剪裁Bitmap
• 保存剪裁后的图片到本地

其中图片的下载和加载为Bitmap也能合并成一步。

加载本地图片

fun loadBitmapFromFile(filePath: String): Bitmap? {
    val imageFile = File(filePath)
    return if (imageFile.exists()) {
        BitmapFactory.decodeFile(filePath)
    } else {
        null
    }
}

下载图片和加载也能合并成一步

// 下载图片并直接转为Bitmap
fun downloadImageToBitmap(urlString: String): Bitmap? {
    try {
        val url = URL(urlString)
        val connection = url.openConnection() as HttpURLConnection
        connection.setDoInput(true)
        connection.connect()
        val input = connection.getInputStream()
        return BitmapFactory.decodeStream(input)
    } catch (e: Exception) {
        e.printStackTrace()
        return null
    }
}