Open base64 Image in a new tab using JavaScript

Today we’ll show you how to open base64 image in a new tab using JavaScript. In the previous article, we explained how to download a base64 image in JavaScript.

Checkout more articles on JavaScript

• Create a multiline string in JavaScript
• How to convert a string into a camel case in JavaScript
• Automatically refresh or reload a page using JavaScript
• How to generate a Unique ID in JavaScript
• Get the YouTube video ID from a URL using JavaScript

Let’s use the following code to preview base64 image in new tab.

var w = window.open('about:blank');

// FireFox seems to require a setTimeout for this to work.
setTimeout(() => {
  w.document.body.appendChild(w.document.createElement('iframe')).src = "data:image/png;base64," + "base64-image-string";
  w.document.body.style.margin = 0;
  w.document.getElementsByTagName("iframe")[0].style.width = '100%';
  w.document.getElementsByTagName("iframe")[0].style.height = '100%';
  w.document.getElementsByTagName("iframe")[0].style.border = 0;
}, 0);

In the above code, we have created the `iFrame` in the new tab and set the full screen style.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂