Fun with Text to Image in Android

Elye
Elye
May 30, 2019 · 4 min read
Image for post
Image for post

Have you display any Image in your App? Of course you have! How have you done it?… Let me guess…

  1. Have an image asset (either PNG, JPEG, WEBP or VectorDrawable) in your resource folder.
  2. Load the image from an image URL
  3. Payload sent an Image URL that contains image URL, and you load the image.

What if I say, let’s load it from TEXT is the other option? What!?

Yes, that’s possible!

Base64 format

There’s a format call Base64 format that could represent any Binary data in Text. This includes any image file (JPEG, PNG, WEBP, BMP, you name it).

To decode

Assuming you have a Base64 Text representation of an image, to decode it back just use Base64.decode as below. And for my case, I’ll translate into Bitmap using BitmapFactory.decodeByteArray.

Note: the BitmapFactory.decodeByteArray could decode BMP, PNG, JPEG etc, any image format that is listed in https://developer.android.com/guide/topics/media/media-formats#core

fun String.decodeBase64IntoBitmap(): Bitmap {
val imageBytes = Base64.decode(this, Base64.DEFAULT)
return BitmapFactory.decodeByteArray(
imageBytes, 0, imageBytes.size)
}

To encode

Well, to encode an image back to Base64 format, just use Base64.encodeToString

fun Bitmap.encodeBitmapIntoBase64(compressFormat: Bitmap.CompressFormat, quality: Int = 0): String {
val baseArrayOutputStream = ByteArrayOutputStream()
compress(compressFormat, quality, baseArrayOutputStream)
val imageBytes = baseArrayOutputStream.toByteArray()
return Base64.encodeToString(imageBytes, Base64.DEFAULT)
}

fun Context.encodeImageIntoBase64(@DrawableRes resourceId: Int,
compressFormat: Bitmap.CompressFormat,
quality: Int = 0): String {
val bitmap = BitmapFactory.decodeResource(resources, resourceId)
return bitmap.encodeBitmapIntoBase64(compressFormat, quality)
}

In the above, I separate the convert resource to Bitmap found and convert Bitmap to Base64 function for clarity.

For the encodeBitmapIntoBase64 function, the compressFormat can be Bitmap.CompressFormat.JPEG, Bitmap.CompressFormat.PNG or Bitmap.CompressFormat.WEBP and the quality is range between 0 and 100, where 0 is the smallest size but worst visible result.

With the above two, you could convert an image to Base64 text and vice versa. I have an example app which will show the image below

Image for post
Image for post

What’s the benefit of doing so?

The conventional approach is the Payload is sent with a JSON data that contains the URL that points to where the image is stored.

With that the client (device) would need to load the initial JSON first, then only load the image later, which introduce some delay to the image load

Image for post
Image for post

While that’s the practice done mostly and seems like the defector approach, there might be times where we only need a small image, and want to ensure it load instantaneously.

With that, we might want a way to attach the image with our payload (e.g. JSON Blob), and once loaded, we have the full text and images (and other files.

Image for post
Image for post

With this, all the needed data would be loaded within a single call. All image is provided together, and no more additional call to fetch the image needed anymore.

Is this the way moving forward?

No. Converting Image to Text is not ideal.

Personally I won’t recommend doing it unless in special circumstances.

My reasons would be below

  1. Firstly the text size is larger than the image size
  2. One has to manually decode it back before using, more processing time needed.
  3. Verification is harder as the provided text might not be the right content.

But for some unique cases, maybe this could be experimented. 🤞

In case you like to convert an image to Base64 manually, below is the link you could use.

I hope this post is helpful to you. You could check out my other interesting topics here.

Follow me on medium, Twitter, Facebook or Reddit for little tips and learning on Android, Kotlin etc related topics. ~Elye~

Mobile App Development Publication

Sharing Mobile App Development and Learning

Elye

Written by

Elye

Passionate about learning, and sharing mobile development and others https://twitter.com/elye_project https://www.facebook.com/elye.proj

Mobile App Development Publication

Sharing iOS, Android and relevant Mobile App Development Technology and Learning

Elye

Written by

Elye

Passionate about learning, and sharing mobile development and others https://twitter.com/elye_project https://www.facebook.com/elye.proj

Mobile App Development Publication

Sharing iOS, Android and relevant Mobile App Development Technology and Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store