Javascript 将base64图像数据输出到新窗口而不被阻止？

现在有点像Javascript噩梦

我使用html2canvas将div转换为画布，然后使用

.toDataURL

将画布转换为base64数据流

我想在新窗口中打开base64图像数据，但它会被我测试过的每个弹出窗口阻止程序阻止

这是我函数的一个示例

function generateImage(xarg){
    var divid= document.getElementById(xarg);
    html2canvas(divid, {
        onrendered: function(canvas) {
            var imgdata = canvas.toDataURL("image/png");
            window.open(imgdata);
        }
    });
}

知道为什么我的

窗口.open

被阻止了吗

编辑：我的另一个想法是开始下载图像，但我找到的每个解决方案都要求将数据更改为

image/octet-stream

，这会弄乱文件类型，我的用户将无法处理这一问题（尤其是移动设备上的用户）。

---

我最初有一篇更长的帖子解释我的情况，但为了简洁起见，我把它删掉了。

其他关于弹出窗口被阻止的直接回应，因为它是异步打开的（甚至是通过点击事件的回调）。我通过以下方式解决了这个问题： -直接在单击处理程序上打开空白弹出窗口 -启动html内容的“canva-ification” -创建在弹出窗口中发布canva base64数据的临时表单

这种方法的缺点是，当生成canva时，用户有一个空白的弹出窗口。我希望这有帮助

function clickHandler(elementId /*the id of the element to convert to an image */) {
    // opens the popup directly -> not blocked by browsers
    var popup = window.open('about:blank', 'screenshotWindow', 'width=950,height=635');

    // creates the form
    var form = window.document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('target', 'screenshotWindow');
    window.document.body.appendChild(form);

    html2canvas(window.document.getElementById(elementId), {
        onrendered: function(canvas) {
            // posts the base64 content in the popup with the form and removes it
            form.setAttribute('action', canvas.toDataURL('image/png'));
            popup.focus();
            form.submit();
            window.document.body.removeChild(form);
        }
    });
}

---

其他关于弹出窗口被阻止的直接响应，因为它是以异步方式打开的（甚至是通过单击事件的回调）。我通过以下方式解决了这个问题： -直接在单击处理程序上打开空白弹出窗口 -启动html内容的“canva-ification” -创建在弹出窗口中发布canva base64数据的临时表单

这种方法的缺点是，当生成canva时，用户有一个空白的弹出窗口。我希望这有帮助

function clickHandler(elementId /*the id of the element to convert to an image */) {
    // opens the popup directly -> not blocked by browsers
    var popup = window.open('about:blank', 'screenshotWindow', 'width=950,height=635');

    // creates the form
    var form = window.document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('target', 'screenshotWindow');
    window.document.body.appendChild(form);

    html2canvas(window.document.getElementById(elementId), {
        onrendered: function(canvas) {
            // posts the base64 content in the popup with the form and removes it
            form.setAttribute('action', canvas.toDataURL('image/png'));
            popup.focus();
            form.submit();
            window.document.body.removeChild(form);
        }
    });
}

---

这是否发生在

单击事件中？或者你在其他时间运行这个？您是否尝试将
imgdata
替换为
”
，以查看它是否打开了一个空窗口？@Ian我有一个
在
onClick
属性中调用函数。刚刚尝试了
窗口。打开（“”）并且它仍然被阻止。我知道我在这里做了一些错误的事情，被标记为恶意的，我只是不确定是什么。我打赌
onrendered
方法是异步的，因此作用域失去了它的“单击”上下文，因此被弹出窗口阻止器阻止（就像通过
窗口打开的其他弹出窗口一样。打开
而不是通过
单击
事件）这不是恶意的，只是因为该方法是异步的，当它被执行时，浏览器不知道它最初是由
点击
事件触发的（这是不被阻止所必需的）是的，这是浏览器防止网站在没有用户交互的情况下无限/不可控地生成弹出窗口的方式。既然你说这是从一个
click
事件调用的，我猜问题是因为
onrendered
是异步的，这是在
click
事件中发生的吗？或者你在其他时间运行这个？您是否尝试将
imgdata
替换为
”
，以查看它是否打开了一个空窗口？@Ian我有一个
在
onClick
属性中调用函数。刚刚尝试了
窗口。打开（“”）并且它仍然被阻止。我知道我在这里做了一些错误的事情，被标记为恶意的，我只是不确定是什么。我打赌
onrendered
方法是异步的，因此作用域失去了它的“单击”上下文，因此被弹出窗口阻止器阻止（就像通过
窗口打开的其他弹出窗口一样。打开
而不是通过
单击
事件）这不是恶意的，只是因为该方法是异步的，当它被执行时，浏览器不知道它最初是由
点击
事件触发的（这是不被阻止所必需的）是的，这是浏览器防止网站在没有用户交互的情况下无限/不可控地生成弹出窗口的方式。既然你说这是从一个
click
事件调用的，我猜问题是因为
onrendered
是异步的