javascript - 通过 jQuery 或 JS 打开或重定向到 Base64 DataURL

Question

我有一个将 Canvas 元素转换为 <img> 的脚本标记，然后在新窗口中重新加载它(关于:空白页)。如果我随后右键单击图像并选择“在新选项卡中打开图像”，它会打开 Base64 DataURL(即仅图像)。

有没有什么方法可以打开 Base64 DataURL 而无需用户右键单击图像？

理想情况下，用户永远不会看到 about:blank 页面，而只会被重定向到 DataURL。

这是生成图像并在新窗口中打开它的当前代码:

<script>
function print_card(){
    var canvas=document.getElementById("canvas");
    var win=window.open();
    win.document.write("<img id='compiledImg' src='"+canvas.toDataURL('image/png')+"' width='324' height='204' style='margin: 0; padding: 0; background: #e6e6e6;'/>");
    win.location.assign(reload);
}

$("#printCard").click(function(){ print_card(); });
    </script>

看起来我应该能够从图像 ID 获取数据 URL 并重定向到它而不是新窗口，但我不知道如何完成它。

我尝试分配 canvas.toDataURL('image/png)至 win.location但这没有帮助。

任何指导将不胜感激。

Answer 1

您似乎只是想在新选项卡中打开生成的图像。出于安全原因，大多数现代浏览器不允许在顶部框架中以编程方式打开数据 URL，您需要使用不同的方法，例如。一个blob像这样:

function openCanvasContentInNewWindow(canvas) {
  canvas.toBlob(blob => {
    const objectURL = URL.createObjectURL(blob);
    window.open(objectURL);
  }, 'image/png');
}

Reference for the HTMLCanvasElement.toBlob method .

如果需要支持不支持HTMLCanvasElement.toBlob()的浏览器(比如Edge和旧版浏览器)，可以使用this polyfill . (由于我不是polyfill的作者，所以我不确定我直接把代码贴在这里是否可以。)