Android Studio – How can I only capture the image which is shown inside the box in android jetpack compose?

Creating a new bitmap will return a portion of original image in Rectangle shape not in a custom shape. Very likely reason you get that exception is difference between Composable and Bitmap dimensions. When you crop an image on a Composable you need to interpolate left and size of Composable to Bitmap left and size.

What this means is let’s say your image is 1000x1000px while your screen is 2000x2000px

if you wish to get (200,200) position with 1000px width/height on Composable you get it as

val actualLeft =left* (bitmapWidth/composableWidth)
200*(1000/2000) = 100 should be the coordinate of left position on image. Same goes for y coordinate, width and height.

What you actually ask is image cropper with shape minus gestures. As i answered in previous question you need to use Canvas. But this time Canvas should be

androidx.compose.ui.graphics.Canvas

And pass your Image as

    val canvas: androidx.compose.ui.graphics.Canvas = Canvas(imageBitmap)

and

canvas.apply {
        drawRoundedRect(
           // properties
            paint = paint
        )
    }

then draw the shape, and convert it to a path since we need to use it in this Canvas with a Paint. This Paint should have XferMode.SrcIn. I will update this answer when i’m available. You can check out this question, NativeCanvasSample2is very similar to what you wish to achieve except what i want to achieve is a cropper gestures.

I made a workaround and sample that how you can clip with a shape SrcIn with compose Canvas or using scaling and interpolation to correctly clip an image using rectDraw and rectCrop.

@Composable
fun TransparentClipLayout(
    modifier: Modifier,
    imageBitmap: ImageBitmap,
    width: Dp,
    height: Dp,
    offsetY: Dp,
    crop: Boolean = false,
    onCropSuccess: (ImageBitmap) -> Unit
) {

    val offsetInPx: Float
    val widthInPx: Float
    val heightInPx: Float

    with(LocalDensity.current) {
        offsetInPx = offsetY.toPx()
        widthInPx = width.toPx()
        heightInPx = height.toPx()
    }

    BoxWithConstraints(modifier) {

        val composableWidth = constraints.maxWidth
        val composableHeight = constraints.maxHeight


        val widthRatio = imageBitmap.width / composableWidth.toFloat()
        val heightRatio = imageBitmap.height / composableHeight.toFloat()

        val rectDraw = remember {
            Rect(
                offset = Offset(
                    x = (composableWidth - widthInPx) / 2f,
                    y = offsetInPx
                ),
                size = Size(widthInPx, heightInPx)
            )
        }

        val rectCrop by remember {
            mutableStateOf(
                IntRect(
                    offset = IntOffset(
                        (rectDraw.left * widthRatio).toInt(),
                        (rectDraw.top * heightRatio).toInt()
                    ),
                    size = IntSize(
                        (rectDraw.width * widthRatio).toInt(),
                        (rectDraw.height * heightRatio).toInt()
                    )
                )
            )
        }

        LaunchedEffect(crop) {
            if (crop) {
                delay(500)
                val croppedBitmap = Bitmap.createBitmap(
                    imageBitmap.asAndroidBitmap(),
                    rectCrop.left,
                    rectCrop.top,
                    rectCrop.width,
                    rectCrop.height
                ).asImageBitmap()

                onCropSuccess(croppedBitmap)
            }
        }

        Canvas(modifier = Modifier.fillMaxSize()) {

            if (!crop) {
                drawImage(
                    image = imageBitmap,
                    dstSize = IntSize(size.width.toInt(), size.height.toInt())
                )
            }

            with(drawContext.canvas.nativeCanvas) {
                val checkPoint = saveLayer(null, null)

                if (!crop) {
                    // Destination
                    drawRect(Color(0x77000000))

                    // Source
                    drawRoundRect(
                        topLeft = rectDraw.topLeft,
                        size = rectDraw.size,
                        cornerRadius = CornerRadius(30f, 30f),
                        color = Color.Transparent,
                        blendMode = BlendMode.Clear
                    )

                } else {
                    // Destination
                    drawRoundRect(
                        topLeft = rectDraw.topLeft,
                        size = rectDraw.size,
                        cornerRadius = CornerRadius(30f, 30f),
                        color = Color.Red,
                    )

                    // Source
                    drawImage(
                        image = imageBitmap,
                        dstSize = IntSize(size.width.toInt(), size.height.toInt()),
                        blendMode = BlendMode.SrcIn
                    )
                }

                restoreToCount(checkPoint)
            }
        }
    }
}

Usage

var croppedImage by remember { mutableStateOf<ImageBitmap?>(null) }

var crop by remember { mutableStateOf(false) }
var showDialog by remember { mutableStateOf(false) }

val imageBitmap = ImageBitmap.imageResource(id = R.drawable.landscape1)

Box(modifier = Modifier.fillMaxSize()) {
    TransparentClipLayout(
        modifier = Modifier.fillMaxSize(),
        imageBitmap = imageBitmap,
        width = 300.dp,
        height = 200.dp,
        offsetY = 150.dp,
        crop = crop,
        onCropSuccess = {
            croppedImage = it
            crop = false
            showDialog = true
        }
    )

    Button(
        modifier = Modifier
            .padding(20.dp)
            .fillMaxWidth()
            .align(Alignment.BottomStart),
        onClick = { crop = true }) {
        Text("Capture")
    }

    if (showDialog) {
        croppedImage?.let {
            ShowCroppedImageDialog(
                imageBitmap = it
            ) {
                showDialog = !showDialog
                croppedImage = null
            }
        }
    }
}

Dialog

@Composable
fun ShowCroppedImageDialog(imageBitmap: ImageBitmap, onDismissRequest: () -> Unit) {
    androidx.compose.material3.AlertDialog(
        onDismissRequest = onDismissRequest,
        text = {
            Image(
                modifier = Modifier.fillMaxWidth().aspectRatio(),
                contentScale = ContentScale.Fit,
                bitmap = imageBitmap,
                contentDescription = "result"
            )
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}

Result

In result the one in screen is due to BlendMode.SrcIn if you fusion with the Canvas that takes image you will be able to get it. The one in dialog is the actual one because of cropping image. As i mentioned above you can crop images with a Rectangle.

You need to implement Canvas(bitmap) for custom shapes as in my question, i might update this answer with androidx.compose.ui.graphics.Canvas = Canvas(imageBitmap) when i’m available in the future, i faced some issues but will fix them soon. This is basically how to build an image cropper with shape and crop after scaling in Bitmap dimensions.