Question 194651 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – View base64 encoded PNG in browser console

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?

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search