Question

目前有一点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);
        }
    });
}

知道为什么window.open被阻止了吗？

编辑：我的另一个想法是开始下载图像，但我发现的每个解决方案都要求将数据更改为image/octet-stream，这会混淆文件类型，而且我的用户赢了无法处理（尤其是移动设备上的那些）。我原本有一个更长的帖子来解释我的情况，但是我把它简化为简洁。

Answer 1

关于弹出窗口因其打开异步方式而被阻止的其他直接响应（即使是单击事件的回调）。我解决了这个问题： - 直接在点击处理程序上打开一个空白弹出窗口 - 启动＆＃34; canva-ification＆＃34;的HTML内容 - 创建一个临时表单，在弹出窗口中发布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);
        }
    });
}

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

1 个答案: