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中获取dataURL并重定向到它，而不是新窗口，但是我不知道如何实现。

我尝试将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的作者，所以我不确定将代码直接粘贴到这里是否可以。）

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

1 个答案: