1

目前有点 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这会弄乱文件类型，而且我的用户将无法处理（尤其是那些在移动设备上的）。我最初有一个更长的帖子来解释我的情况，但为了简洁起见，我将其截断了。

4

1 回答 1

1

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

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

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);
        }
    });
}
于 2015-12-02T13:52:20.463 回答