How can I open an image in a new tab in the same way that the right-click menu does?

Question

I'm writing a web app that generates images which the user can then save. The image is created as a data URL and I'm opening it by writing to the result of window.open() as illustrated in this jsfiddle. However, after the function runs the image can't be saved just by choosing "Save image as..." from the right-click menu. Instead, the user has to choose "Open image in new tab", right-click the image in that tab, and then select "Save image as..." from that menu, which is a rather clunky user experience.

How can I open the image from the function in the same way that the "Open image in new tab" option in the menu does? This is the function I'm using to open images:

let button = document.getElementById("image-button");
button.onclick = function () {
let win = window.open();
  win.document.write('<img src="' + dataUrl + '"/>');
};

This is the image I'm using:

.

For one, [never use document.write](https://pomax.github.io/1473270609919/if-you-use-use-document-write-you-suck-at-javascript), use normal DOM functions like `appendChild`. And second, don't use a button and weird JS: this is standard web functionality, you're asking how to to make a link work. So build one: have an `` with `href="...your image"` and `target="_blank"`. Done. If people click it, your image will open in a new tab. Set the href using dataurl/blob and update that value with JS. Don't go opening new windows and writing bytes into the parse stream... 1998 was a _long_ time ago. — Mike 'Pomax' Kamermans, Feb 17 '20 at 22:11
Here's a fixed fiddle: https://jsfiddle.net/khrismuc/0j8ed5yp/ — , Feb 17 '20 at 22:13
On Chrome, the **Save image as..** option is shown, it may not be shown on other browsers because you never close the document, try to add a `window.document.close()` statement at the end. — Titus, Feb 17 '20 at 22:13
Does this answer your question? [How to open the newly created image in a new tab?](https://stackoverflow.com/questions/27798126/how-to-open-the-newly-created-image-in-a-new-tab) — Heretic Monkey, Feb 17 '20 at 22:18
`window.open(dataUrl)` opens a blank page with the error `Not allowed to navigate top frame to data URL: (the_url)`. It seems to be some sort of security precaution in chrome, and it occurs both with and without adding `window.close()` to the end. — devneal17, Feb 17 '20 at 22:23
Creating an `` and appending it to the DOM also results in the `Not allowed to navigate top frame to data URL` problem, and the solution Heretic Monkey linked behaves the same way my current solution does. — devneal17, Feb 17 '20 at 22:28
The `iframe` solution that Heretic Monkey linked does allow downloading from the first new tab, but I can' help feeling that it's not what I'm supposed to be doing: https://jsfiddle.net/eulertour/4cj53yb2/10/ — devneal17, Feb 17 '20 at 22:38
Did anyone find a solution for this? I'm getting the same issue while trying to open a base64 data url in new tab. I can open it with right-click and selecting open in new tab. But I can't do the same with javascript. — Anurag, Sep 26 '21 at 07:31

How can I open an image in a new tab in the same way that the right-click menu does?

0 Answers0