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

Question

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

Use `window.open` and write into this window. – Liglo App Jan 06 '15 at 11:57 — Liglo App, Jan 06 '15 at 11:57

score 104 · Accepted Answer · answered Jan 06 '15 at 12:00

104

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

answered Jan 06 '15 at 12:00

Super Babaca

1,585
2
13
15

3

can we do this for more then one image? – techie_28 Jul 11 '16 at 09: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 '19 at 19:58
1

be advised: user cannot save image from this new window tab – SimplGy Feb 28 '19 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 '19 at 09:20
Actually to the w.document.write I included a full img markup but hey it works! Thanks! – DinoSaadeh Jan 20 '21 at 15:44
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? – Ralph Dingus May 24 '22 at 17:27

score 33 · Answer 2 · edited Oct 19 '21 at 18:19

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

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

hrvoj3e · Answer 3 · 2019-10-30T12:38:20.070

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

edited Oct 30 '19 at 12:38

answered Oct 30 '19 at 12:30

hrvoj3e

2,512
1
23
22

score 2 · Answer 4 · answered Feb 17 '22 at 11:29

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

Todd · Answer 5 · 2021-03-03T16:05:23.433

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.

edited Mar 03 '21 at 16:05

answered Jan 06 '15 at 12:05

Todd

5,314
3
28
45

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 '15 at 13:41
4

I'm getting this: "Not allowed to navigate top frame to data URL" – Alejandro Lozdziejski Jul 16 '18 at 16:30
2

This used to work but chrome is now blocking Not allowed to navigate top frame to data URL: – David Wilton Jun 14 '19 at 01: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 03 '21 at 15:55
1

Won't work if the *placeholder* is an actual data URL. [See Data_URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). – c z Apr 13 '21 at 14:35

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

5 Answers5

demo

Linked