<分区>
我有一个移动页面，用户可以在其中使用文本区域创建自己的智能手机背景。我使用 html2canvas 将文本区域转换为 Canvas ，并使用 windwow.open + canvas.toDataURL 在新选项卡中打开 PNG 供用户保存。 它适用于 Chrome，但据我所知，Safari 不允许我使用 window.open。 有没有其他方法可以让用户下载 PNG？我在想也许可以使用将文本区域转换为链接到一个空的 html 文件并将 Canvas 附加到该空的 html 文件的按钮？但我不确定那会如何运作。
非常感谢您!
这是我现在的 JS:
$(function() {
$("#buttononelandscape").click(function() {
html2canvas($("#testlandscape"), {
onrendered: function(canvas) {
theCanvas = canvas;
window.open(canvas.toDataURL("image/png"));
}
});
});
});
最佳答案
在我看来，您是在间接调用 window.open，而不是在对用户事件的直接响应中调用。大多数浏览器会阻止这些调用(我很惊讶 Chrome 不会，但我对 Canvas 渲染知之甚少)。
您可能必须将您的逻辑分解为两个按钮:一个生成 data: URI，然后另一个将它作为一个新窗口打开，这样您可以执行 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);
};
关于javascript - Mobile 上的 Safari 阻止 window.open，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30871799/
相关文章：
javascript - 如何使用css和js制作被动波浪效果按钮
javascript - WebGL 着色器根据鼠标位置为纹理着色
javascript - 滚动到放置在其自己的 DIV 中的 jQuery Accordion 控件中的打开选项卡
Javascript 下载在 Firefox 和 IE 中不起作用
javascript - 当我使用 javascript 的 document.write 命令时，它似乎不显示前导空格。请帮助
javascript - 我怎样才能有一个搜索框，人们可以在其中搜索我网站中的页面？