Android에서 URI 이미지를 Firebase에 저장하고 Jetpack Compose로 표시하기

안녕하세요! 이번 글에서는 Android에서 URI 이미지를 Firebase Realtime Database에 저장하고 이를 Jetpack Compose로 표시하는 방법을 알아보겠습니다. 전체 과정은 다음과 같이 진행됩니다:

 

이미지 적용 예제

1. URI 문자열을 받아 byte[]로 변환하기

   import android.graphics.BitmapFactory
   import android.net.Uri
   import android.content.Context
   import java.io.ByteArrayInputStream
   import java.io.ByteArrayOutputStream
   import java.io.InputStream
   import java.io.IOException
   
   fun uriToByteArray(uriString: String, context: Context): ByteArray? {
       return try {
           val uri: Uri = Uri.parse(uriString)
           val inputStream: InputStream? = context.contentResolver.openInputStream(uri)
           val bitmap = BitmapFactory.decodeStream(inputStream)
           val outputStream = ByteArrayOutputStream()
           bitmap.compress(Bitmap.CompressFormat.WEBP, 100, outputStream)
           inputStream?.close()
           outputStream.close()
           outputStream.toByteArray()
       } catch (e: IOException) {
           e.printStackTrace()
           null
       }
   }

2. byte[]를 문자열로 변환하여 Firebase Realtime Database에 저장하기

   import com.google.firebase.database.FirebaseDatabase
   import java.util.Base64
   
   fun saveByteArrayToFirebase(byteArray: ByteArray, referencePath: String) {
       val database = FirebaseDatabase.getInstance()
       val ref = database.getReference(referencePath)
       val encodedString = Base64.getEncoder().encodeToString(byteArray)
       ref.setValue(encodedString)
   }

3. Firebase Realtime Database에서 문자열을 읽어와 byte[]로 변환하기

   import com.google.firebase.database.DataSnapshot
   import com.google.firebase.database.DatabaseError
   import com.google.firebase.database.ValueEventListener
   import java.util.Base64
   
   fun fetchByteArrayFromFirebase(referencePath: String, callback: (ByteArray?) -> Unit) {
       val database = FirebaseDatabase.getInstance()
       val ref = database.getReference(referencePath)
       
       ref.addListenerForSingleValueEvent(object : ValueEventListener {
           override fun onDataChange(snapshot: DataSnapshot) {
               val encodedString = snapshot.getValue(String::class.java)
               val byteArray = Base64.getDecoder().decode(encodedString)
               callback(byteArray)
           }
   
           override fun onCancelled(error: DatabaseError) {
               callback(null)
           }
       })
   }

4. byte[]를 Jetpack Compose Image로 표시하기

   import android.graphics.BitmapFactory
   import androidx.compose.foundation.Image
   import androidx.compose.runtime.*
   import androidx.compose.ui.graphics.ImageBitmap
   import androidx.compose.ui.graphics.asImageBitmap
   import androidx.compose.ui.res.painterResource
   import java.io.ByteArrayInputStream
   
   @Composable
   fun WebPImageFromFirebase(referencePath: String, context: Context) {
       var imageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }
       
       fetchByteArrayFromFirebase(referencePath) { byteArray ->
           byteArray?.let {
               val bitmap = BitmapFactory.decodeStream(ByteArrayInputStream(it))
               imageBitmap = bitmap?.asImageBitmap()
           }
       }
       
       imageBitmap?.let {
           Image(bitmap = it, contentDescription = null)
       }
   }

위 과정을 통해 Android 앱에서 URI 이미지를 Firebase에 저장하고 이를 Jetpack Compose로 표시할 수 있습니다. 도움이 되셨길 바랍니다!

추가로 궁금한 점이 있으면 언제든지 댓글로 알려주세요! 감사합니다. 😊