45

Below code creates the image in the bottom of the same page. How to display that image into a new tab/window instead of displaying in the same page?

success: function (data) {
            var image = new Image();
            image.src = "data:image/jpg;base64," + data.d;
            document.body.appendChild(image);
        }
1
  • Use window.open and write into this window.
    – Liglo App
    Jan 6, 2015 at 11:57

5 Answers 5

106

something like:

success: function (data) {
        var image = new Image();
        image.src = "data:image/jpg;base64," + data.d;

        var w = window.open("");
        w.document.write(image.outerHTML);
    }
6
  • 3
    can we do this for more then one image?
    – techie_28
    Jul 11, 2016 at 9:23
  • May be obvious.. But when using above in Chrome. I get "popus were blocked..." and therefore Cannot read property 'document' of null :/
    – ttugates
    Feb 11, 2019 at 19:58
  • 1
    be advised: user cannot save image from this new window tab
    – SimplGy
    Feb 28, 2019 at 22:38
  • 6
    Don't forget to add: w.document.close(); on the end, else the page will keep on loading. (Tested in Chrome)
    – Dirk
    Jun 17, 2019 at 9:20
  • Actually to the w.document.write I included a full img markup but hey it works! Thanks!
    – DinoSaadeh
    Jan 20, 2021 at 15:44
33

Current suggestions were not working on chrome, I was always getting a white page, now I am using

const base64ImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const contentType = 'image/png';

const byteCharacters = atob(base64ImageData.substr(`data:${contentType};base64,`.length));
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
    const slice = byteCharacters.slice(offset, offset + 1024);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.open(blobUrl, '_blank');

Thanks to Jeremy!
https://stackoverflow.com/a/16245768/8270748

1
  • In 2022, at least for me, this is the only solution that worked in Chrome, Safari and Firefox.
    – RAC
    Aug 25, 2022 at 22:17
21

Latest solution - works 2019-10.

Open image in new tab.

let data = 'data:image/png;base64,iVBORw0KGgoAAAANS';
let w = window.open('about:blank');
let image = new Image();
image.src = data;
setTimeout(function(){
  w.document.write(image.outerHTML);
}, 0);

https://stackoverflow.com/a/58615423/2450431 https://stackoverflow.com/a/46510790/2450431 https://stackoverflow.com/a/27798235/2450431

2

You can use document.write() and add html page by yourself. This option allows also to add tab title.

const newTab = window.open();

newTab?.document.write(
    `<!DOCTYPE html><head><title>Document preview</title></head><body><img src="${base64File}" width="100px" height="100px" ></body></html>`);

newTab?.document.close();
0

demo

Updated DEMO (working in Chrome, even with pops blocked) - 3/3/2021

wrapping the call to window.open circumvents the issues detailed below.

document.getElementById('my_button').addEventListener('click', (evt) => {
  window.open("https://via.placeholder.com/150", '_blank')
});

Last tested in Chrome 88 on 64 bit Windows 10.

5
  • 2
    Inside the demo, it might be worth triggering the new window on a click event, just so it isn't blocked by most browsers as a pop-up (I thought the demo was broken for a minute before I noticed there was a blocked pop-up)
    – DBS
    Sep 25, 2015 at 13:41
  • 4
    I'm getting this: "Not allowed to navigate top frame to data URL" Jul 16, 2018 at 16:30
  • 2
    This used to work but chrome is now blocking Not allowed to navigate top frame to data URL: Jun 14, 2019 at 1:57
  • This is still working for me in Chrome 88 64 bit, Windows 10... However, you have to allow pop-ups (in the search bar). As @DBS suggests, running as an event handler in chrome 88 even with pop-ups blocked... Check updated demo.
    – Todd
    Mar 3, 2021 at 15:55
  • 1
    Won't work if the placeholder is an actual data URL. See Data_URIs.
    – c z
    Apr 13, 2021 at 14:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.