如何使Chrome在新窗口中保存base64编码图像作为png

Question

Chrome在将这些图像写入空白窗口时保存Base64编码图像的挑战。

我有一个canvas，我想从中创建一个图像，并允许用户以简单的"右键单击"下载，然后"另存为"对话框"。

我有JavaScript代码在FF（60 ）和MS Edge中按照所需工作的工作：

function download() {
  ctx1.drawImage(c2,0,0);
  ctx1.drawImage(c3,0,0);
  var image="<img src='"+planner1.toDataURL()+"' alt='canvas image'/>";
  var tab = window.open();
  tab.document.write(image);
}

HTML按钮激活该功能：

<span class="style2"><button class="button2" id="page1" style="float:right;margin-right:10px" onclick="download();document.body.style.cursor='wait'">Open Image</button></span>

当运行它时，窗口/选项卡将在Chrome中打开，用户可以右键单击图像，然后选择"对话框弹出"时"另存为"。

但是，没有弹出任何后续对话框，询问用户在哪里保存图像。为了实际保存图像，用户必须右键单击图像，然后选择"在新标签中打开图像"。这将打开另一个窗口/选项卡，然后用户可以实际将图像保存为png文件。

不确定为什么这是Chrome默认行为，但是我在这里。

我可以收集的可能是因为Chrome将javascript解释为新窗口中写入的普通"数据"，这恰好发生了，它可以解释并显示为Base64编码图像，一旦页面完全加载。用户需要另一个步骤来使Chrome打开现有的解释和显示的图像作为可以在本地保存的实际图像。

也可能是因为在任何地方未指定默认文件名。

ff和edge都在"保存为"对话框中创建一个默认名称。

我希望Chrome在这种情况下像FF和Edge一样操作，因此用户不会感到困惑。

，如果人们以前曾经历过这样的人，请感谢任何建议。

Answer 1

这最终是一小部分的黑客作用，但是添加一个小延迟（500ms）才是所有现代浏览器都需要的一切...使用download.js使用v4.2，dandavis。

function getPNG() {
    ctx1.drawImage(c2,0,0);
    ctx1.drawImage(c3,0,0);
    var imgData1 = planner1.toDataURL("image/png");
    download(imgData1, "Planner.png", "image/png");
    window.setTimeout(reload, 500);
function reload(){
    window.location.href = '../php/mplanner.php?pln=<?php echo $user ?>';
    }
}