I have a base64 data url for an image such as...

data:image/png;base64,iVBORw0KGgoAAAANS...

The website generates this image, and users want to open it in a new tab so they can save it.

I see some answers such as this: How to show Base64 image on browser's new tab?

But what about just opening the dataUrl in the tab itself? That way users can do Ctrl S to save the image etc. Rather than viewing an HTML page with the image (Ctrl S would save the html page containing the image)

How can I programmatically make the page open the data url in a new tab, as if the user right clicked -> "Open image in new tab" ?

CodePudding user response：

As seen on the question you linked, there was a data URL ("data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="), when I opened this in a new tab it produced what you're looking for. (It's hard to see if you do it yourself, it's a 1x1 pixel.)

I assume you just want to window.open(base64, '_blank')?

CodePudding user response：

Try using:

<a href="data:image/png;base64,iVBORw0KGgoAAAANS..." download>downlaoad image</a>

you can generate the element with JS, so you can customize the HREF. when you click on the link, you download the image.

// i couldn't put a data url in since a 50x50 image generates such a long url

// also this example might not work since it is in an imbed at stackoverflow and because of CORS but it tested it it does work

<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfljo9goc7R6sYei9VRjy3A3gN3S-gobbyzQ&usqp=CAU" download>download</a>