The other day I was asked to help out a colleague who was running into some problems while generating an image.
He would generate the image in an Android app, but when he previewed the generated image, sometimes the image was broken. The bottom part of the image seemed to be missing altogether.
What he would do is the following:
- Add some text to a Canvas.
- Add some images to the Canvas.
- Convert the generated Bitmap to a Base64 encoded PNG String.
- Print out the Base64 String.
- Copy the Base64 String into another Kotlin app. (This was the easiest way for him, as he was new to Android.)
- Write the image to the hard drive of his laptop.
- Open the image in an image viewer.
The first thing we checked was what configuration was used to load the image that we added to the composite. Changing the configuration made unfortunately no difference to the outcome.
Next we changed how the image was loaded. Originally a Base64 String was decoded and converted to a Bitmap. We changed this to a bit more Android like way by loading the image from Resources. This made no difference either, the resulting image was still broken.
Right, so it’s not the configuration and not how the image is stored. Maybe it is this particular image that is causing it? Replaced this image with a different image and guess what? Still no luck! The resulting composite image was again broken.
Time to take some drastic measures. Let’s turn off steps of the compositing process until we find what step is causing it. Not adding an image, no luck. Not adding two images, nope! Ok, let’s not add text either, of course not. The only thing left was to not fill the background with a solid colour. That seemed to do it!
Obviously generating an empty image wasn’t an option, so we had to keep looking. Taking another leap, we decided to try and preview the image directly in the Android app. Turning all compositing steps back on and now displaying the image in the app directly. Success!
How was this possible? We had gotten a broken image as a result every single time. Then it (finally) hit me: Logcat has a maximum line length! Anything that exceeds the line length gets truncated. The Base64 encoded String that represented the composite image was naturally quite long, exceeding the Logcat maximum line length and thus getting truncated. As a result we had a broken image no matter what we tried.
The moral of the story: Don’t trust your console to print everything you throw at it.