0

I'm constantly working with base64 encoded PNGs and want to preview them.

My current workflow is to console.log(base64PNG) to the console, and then copy the image into a website like https://base64.guru/converter/decode/image/png where I can decode + preview the image.

enter image description here

Is there some way (for ex. a Chrome extension) where I can just preview these inside the console?

David Ferris
  • 2,215
  • 6
  • 28
  • 53
  • Does this answer your question? [How to display Base64 images in HTML](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) – evolutionxbox Jun 26 '23 at 16:22

2 Answers2

1

You can display images in the console (chrome) see https://github.com/adriancooney/console.image

I had a quick look through the code and created a simple example (the css padding/height/width etc are not right, but it works)

console.log("%c Image", "background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVEhL7ZTBDYQgEEW3G/qxGm9Uwc0O7MGEJrxagEXM4uxIUAf/wRCTzbzMYSAkD/8QP+Rd02JBO0wAMQHEBJDXBQuF/FfpZW8dyHe0XnoVIBgdjZP0saMwHHvWx0U2Ve4E59tNxTL1jkKhrIEEOZ9fFb6533ZmWVVBgj33M/w1MTlqB3ZuZ1CPWGbDB/KQVMCQD68ohc6Jb+FoL0oFCR5jAogJICaA/I2gXXn3BSpPGV5H5sKpAAAAAElFTkSuQmCC'); background-size: 32px 32px; line-height: 32px; font-size: 1px; padding: 32px;").

The following function should help, I couldn't work out how to stop it repeating the image, so I just added background-repeat: no-repeat.

function logimage(h, w, uri) {
    console.log("%c+",`font-size: 1px; padding: ${Math.floor(h/2)}px ${Math.floor(w/2)}px; line-height: ${h}px;background: url('${uri}'); background-size: ${h}px ${w}px; background-repeat: no-repeat; color: transparent;`)
}

Depending on the source of your base64 strings, it should be pretty simple to create a bookmarklet to automate this.

NickSlash
  • 4,758
  • 3
  • 21
  • 38
0

You can just create an Image object and put the base64 as its src, including the data:image... part like this:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

It's what they call "Data URIs" and here's the compatibility table for inner peace.

Mahdi Chaaben
  • 1