TiTi Side Project | Composable 함수를 Bitmap으로 변환하기

Timer TiTi 프로젝트에서는 Card를 이미지로 변환하여 갤러리에 저장하거나 인스타그램에 공유하는 기능을 추가하려고 합니다.

이를 위해서는 Composable 함수로 구현된 View를 Bitmap으로 변환하는 로직이 필요합니다.

fun Modifier.createCaptureImageModifier(picture: Picture): Modifier = this.drawWithCache {
    val width = this.size.width.toInt()
    val height = this.size.height.toInt()
    onDrawWithContent {
        val pictureCanvas = Canvas(
            picture.beginRecording(
                width,
                height,
            ),
        )
        draw(this, this.layoutDirection, pictureCanvas, this.size) {
            this@onDrawWithContent.drawContent()
        }
        picture.endRecording()

        drawIntoCanvas { canvas ->
            canvas.nativeCanvas.drawPicture(picture)
        }
    }
}

우선은 Composable 함수를 Picture 객체로 캡쳐하는 로직이 필요로 합니다.

• drawWithCache는 캐싱 메커니즘을 활용하여 그리기 작업을 최적화합니다. 뷰의 크기가 변경되거나 관련된 상태가 변할 때만 그리기 로직을 다시 실행하도록 합니다.
• onDrawWithContent 함수는 실제 콘텐츠를 그리는 부분입니다. 이는 커스텀 그리기 작업을 수행하기 전후로 기존의 콘텐츠 그리기를 유지합니다.
• Canvas(picture.beginRecording(width, height))는 캡처할 뷰의 크기에 맞게 Picture 녹화를 시작합니다. width, height는 현재 Composable 뷰의 크기를 나타냅니다.
• this@onDrawWithContent.drawContent()를 호출하여 실제 Composable 뷰의 콘텐츠를 그립니다. 이 과정에서 그려진 모든 것은 Picture 객체에 기록됩니다.
• picture.endRecording()는 Picture 객체의 녹화를 종료합니다.
• drawIntoCanvas는 최종적으로 Picture에 기록된 이미지를 현재 Composable 뷰에 그립니다. 여기서 canvas.nativeCanvas.drawPicture(picture)를 사용해 이 작업을 수행합니다.

 fun createBitmapFromPicture(picture: Picture): Bitmap {
    val bitmap = Bitmap.createBitmap(
        picture.width,
        picture.height,
        Bitmap.Config.ARGB_8888,
    )

    val canvas = android.graphics.Canvas(bitmap)
    canvas.drawColor(Color.WHITE)
    canvas.drawPicture(picture)
    return bitmap
}

• Bitmap.createBitmap 함수는 새로운 Bitmap 객체를 생성합니다. 이 때, picture.width와 picture.height는 Picture 객체의 크기를 지정하며, Bitmap.Config.ARGB_8888은 생성될 Bitmap의 픽셀이 표현할 수 있는 색상 깊이를 정의합니다. ARGB_8888은 높은 품질의 컬러를 지원하며, 각 픽셀이 알파(투명도) 값을 포함한 RGBA 각각 8비트를 사용합니다.
• android.graphics.Canvas(bitmap)를 통해 생성된 Bitmap에 그림을 그릴 수 있는 Canvas 객체를 생성합니다. 이 Canvas는 Bitmap을 그리는 "도화지" 역할을 합니다.
• canvas.drawColor(Color.WHITE)를 호출하여 Bitmap의 배경을 흰색으로 채웁니다. 이는 Bitmap 생성 시 초기화되지 않은 픽셀들이 기본적으로 투명한 상태로 설정되기 때문에 필요한 작업입니다. 필요에 따라 다른 배경색을 지정할 수 있습니다.
• canvas.drawPicture(picture)는 Picture 객체에 저장된 그림을 Canvas에 그립니다. 이 과정을 통해 Picture의 내용이 Bitmap으로 변환됩니다.
• 마지막으로 return bitmap을 통해 생성된 Bitmap 객체를 반환합니다. 이 Bitmap은 UI에 표시하거나 파일로 저장하는 등 다양한 목적으로 사용할 수 있습니다.
  

이렇게 반환된 Bitmap을 기반으로 갤러리에 저장하거나 공유할 수 있습니다. 저장과 공유 기능에 대한 작성은 새로운 글에서 소개하겠습니다.

다음글 

TiTi Side Project | Bitmap을 갤러리 저장 or Share 하기