移动设备上的 Safari 会阻止 window.open

Question

我有一个移动页面，用户可以使用文本区域创建自己的智能手机背景。我使用 html2canvas 将文本区域转换为画布，并使用 window.open + canvas.toDataURL 在新选项卡中打开 PNG 供用户保存。它在 Chrome 上运行良好，但据我所知 Safari 不允许我使用 window.open。用户是否有其他方法可以下载 PNG？我正在考虑是否可以使用将文本区域转换为链接到空 html 文件并将画布附加到该空 html 文件的按钮？但我不确定这会如何运作。

预先非常感谢您！

这是我现在的JS：

$(function() { 
$("#buttononelandscape").click(function() { 
    html2canvas($("#testlandscape"), {


        onrendered: function(canvas) {
            theCanvas = canvas;

            window.open(canvas.toDataURL("image/png"));


        }

    });
});

});

Answer 1

在我看来，您是在window.open间接调用，而不是直接响应用户事件。大多数浏览器都会阻止这些调用（我很惊讶 Chrome 不会，但我知道的不多。

您可能必须将逻辑分解为两个按钮：一个生成 URI data:，另一个将其作为新窗口打开，以便您可以执行以下操作：window.open直接响应用户单击。

如果我这样做，它适用于 iPhone 5 上的 Safari：

<input type="button" value="Click Me">

和

document.querySelector("input").onclick = function() {
    var uri = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
    window.open(uri);
};