오늘의 이야기

앱을 만들다가 이미지 활용을 위한 방법을 찾아보는 기회가 생겼다. 며칠간의 고민 끝에 방법이 정리가 되어 간다.

먼저 카메라에서 이미지 가져오기는 다음 링크를 참고 했음을 밝힌다.

 

https://sungbin.land/jetpack-compose-%EA%B0%A4%EB%9F%AC%EB%A6%AC-%EC%B9%B4%EB%A9%94%EB%9D%BC-%EC%97%90%EC%84%9C-%EC%82%AC%EC%A7%84-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-cf517eaca8bd

 

Jetpack Compose 갤러리/카메라 에서 사진 가져오기

rememberLauncherForActivityResult

sungbin.land

 

다만, 가이드에서 말하는 cameraX을 활용하고 싶지는 않고, 기본 카메라 앱을 호출해서 촬영하고 그 결과 이미지만 받아오는 형태로 만들어 보고 싶었다.  그래서 이런저런 내용을 찾아보다가 저 글을 찾게 된 것이다. 감사하게도

 

결과를 이용하는 방식은 아래 코드와 같다. 다름이 있다면, 갤러리에서 이미지를 가져오는 형식은 uri 가 결과가 오고, 카메라의 결과는 bitmap으로 온다는 차이만 있음 다름이다.

// 갤러리에서 사진 가져오기
val launcher = rememberLauncherForActivityResult(contract =
ActivityResultContracts.GetContent()) { uri: Uri? ->
    imageUri = uri
}
// 카메라로 사진 찍어서 가져오기
val takePhotoFromCameraLauncher =
    rememberLauncherForActivityResult(ActivityResultContracts.TakePicturePreview()) { takenPhoto ->
        if (takenPhoto != null) {
            val baos = ByteArrayOutputStream()
            takenPhoto.compress(
                Bitmap.CompressFormat.PNG,
                100,
                baos
            )
            val b: ByteArray = baos.toByteArray()
            val encoded: String = Base64.encodeToString(b, Base64.DEFAULT)
            editor.putString("profileImage", encoded)
            editor.commit()
            imageTy = false
        } else {
            imageTy = false
            Log.e("takenPhoto", "canceled ...")
        }
    }

그래서 앱의 기능 구조에 맞게 uri는 이미지로 변환해 사용할 것이고, bitmap 은 그대로 저장해서 (byte type으로 전환 후) 사용할 것이기 때문에 코드 구현은 마무리가 되었다.

 

각각의 호출은 아래 예시와 같이 한다.  앞에 버튼은 갤러리를 호출하는 부분으로 image의 종류는 다 허용할 것이라서 아래 코드와 같이 구현을 하였고,  사진을 가져오는 부분은 카메라 앱을 호출하는 방식으로 구현을 하였다.

Column(
    Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.End
) {
    IconButton(onClick = {
        imageTy = true
        launcher.launch("image/*")
    }) {
        Icon(
            imageVector = Icons.Default.PhotoAlbum,
            contentDescription = "Search Profile",
            tint = fontColor
        )
    }
    IconButton(onClick = {
        imageTy = true
        takePhotoFromCameraLauncher.launch()
    }) {
        Icon(
            imageVector = Icons.Default.Camera,
            contentDescription = "Take a Picture",
            tint = fontColor
        )
    }
}

 

이제 그 구현된 모습을 보자면 아래 그림과 같이 구현이 되었다.  프로필 이미지를 받아올 때 방법으로 갤러리와 카메라 버튼을 클릭하는 가에 따라서 위에서 구현된 source 가 동작을 할 것이다.

카메라앱 호출과 갤러리 호출 예시

 

실행되는 모습은 앱에서 직접 확인하시길... 아직은 upgrade 전이라서 찾아볼 수 없지만,  조만간 기능 구현이 끝나면 앱의 patch 가 실행 예정이다.