base64
3 Comments

ToolTip: Decoding Base64 Images with Chrome Data URL

Reading the great blog post about Base64 encoding and decoding in .NET/C# written by Jerry Nixon (http://blog.jerrynixon.com/2014/11/reading-and-writing-base64-in-windows.html), I immediately remembered a great trick that comes in very handy when using Base64 encoding.

Suppose you have an image that you would like to encode into base64:

sn

You will end up with a very long string, such as this one:

/9j/4AAQSkZJRgABAQEAYABgAAD/4QBKRXhpZgAATU0AKgAAAAgAAwEaAAUAAAABAAAA MgEbAAUAAAABAAAAOgEoAAMAAAABAAIAAAAAAAA5OHAAAJiWgDk4cAAAmJaA/+EF7Gh 0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSd XNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4NCjx4OnhtcG1ldGEgeG1sbnM6eD0iYW RvYmU6bnM6bWV0YS8iPjxyZGY6UkRGIHhtbG…

During testing of your application, it can be really painful to convert these strings back into jpg files just to see if nothing got missing or corrupted. You could either write a small program, that decodes the base64 string, use a tool or you could use an online base64 decoder/encoder such as this one:

http://www.freeformatter.com/base64-encoder.html

Aaaand, here comes the trick:

If you have Google Chrome installed, you can use a feature called Data Uri to decode your Base64 string. Just type into the chrome address bar:

data:image/jpeg;base64,<base64>

where <base64> is the base64 encoded data. In our example:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBKRXhpZU0…

And BOOM, chrome decodes the Base64 data and displays our image!

image

You can even specify a different target type, such as:

data:image/png;base64,<base64>

or

data:image/webp;base64,<base64>

I like this trick very much. It is a huge timesaver! I hope you like it too!