如何在新选项卡中打开图像数据网址？

Question

我有一个图像的 base64 数据 url，例如...

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

网站生成此图像，用户希望在新选项卡中打开它，以便保存它。

我看到一些答案，例如：How to show Base64 image on browser's new tab?

但是如果只在选项卡本身中打开 dataUrl 呢？这样用户就可以执行

Ctrl+S

来保存图像等。而不是查看包含图像的 HTML 页面（Ctrl+S 将保存包含图像的 html 页面）

如何以编程方式使页面在新选项卡中打开数据 url，就像用户右键单击 ->“在新选项卡中打开图像”一样？

Answer 1

尝试使用：

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

可以用JS生成元素，这样就可以自定义HREF。当您点击链接时，您会下载图像。

// 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>

Answer 2

如您链接的问题所示，有一个数据 URL（“

data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=

”），当我在新选项卡中打开它时，它会生成您要查找的内容。 （自己做的话很难看出来，是1x1像素。）

我想你只是想

window.open(base64, '_blank')

？

Answer 3

最近，Chrome 正在阻止带有

date:

网址的新标签。 最好将base64转换为Blob并打开url。

function openBase64InNewTab(data: string, mimeType: string) {
  var byteCharacters = atob(data);
  var byteNumbers = new Array(byteCharacters.length);

  for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  var byteArray = new Uint8Array(byteNumbers);

  var file = new Blob([byteArray], {
    type: mimeType + ";base64",
  });

  var fileURL = URL.createObjectURL(file);

  window.open(fileURL, "_blank");
}

openBase64InNewTab(base64, 'image/png')