How to open the newly created image in a new tab?

javascript jquery ajax dom

64,492

Solution 1

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);
    }

Solution 2

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

Solution 3

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

Solution 4

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();

View more solutions

64,492

Author by

John Stephen

My interest is to developing windows / web applications.

Updated on February 18, 2022

Comments

John Stephen about 2 years

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);
        }

DBS over 8 years

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)
techie_28 almost 8 years

can we do this for more then one image?
Alejandro Lozdziejski almost 6 years

I'm getting this: "Not allowed to navigate top frame to data URL"
ttugates about 5 years

May be obvious.. But when using above in Chrome. I get "popus were blocked..." and therefore Cannot read property 'document' of null :/
SimplGy about 5 years

be advised: user cannot save image from this new window tab
David Wilton almost 5 years

This used to work but chrome is now blocking Not allowed to navigate top frame to data URL:
Dirk almost 5 years

Don't forget to add: w.document.close(); on the end, else the page will keep on loading. (Tested in Chrome)
DinoSaadeh over 3 years

Actually to the w.document.write I included a full img markup but hey it works! Thanks!
Todd about 3 years

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.
c z about 3 years

Won't work if the placeholder is an actual data URL. See Data_URIs.
Ralph Dingus almost 2 years

Why can't there be a function that replicates 'open image in new tab.' This works great for base64 strings where the image is centered and displayed nicely. Do you know why or how to replicate that function?