html2canvas 忽略我的 svg 元素

Question

我尝试打印页面的屏幕，然后将其保存到 中base64，效果很好，但看起来svg元素被忽略，并且某些css样式效果不好，例如:before和:after，原始页面看起来 -

但转换后看起来像这样 -

您可以看到右侧的圆圈:before被忽略，顶部菜单中的箭头和:after选项卡上的箭头以及添加新选项卡按钮 (+) 相同。我的转换代码看起来 -

printOnePage(){
        document.getElementById('helpPage').style.display= 'none';
        let page = document.getElementById('appContainer');
        html2canvas(page,{
            onrendered: function(canvas) {
                $('#img_val').val(canvas.toDataURL("image/png"));
                console.log(document.getElementById('img_val'));
                //document.getElementById("phpSendForm").submit();
            }
        });
        document.getElementById('helpPage').style.display= '';

    }

有什么提示可能会导致这种情况吗？

Answer 1

html2canvas从0.5.0-alpha1开始支持SVG 渲染

1. 更新
2. 添加allowTaint属性。

像打击：

html2canvas(copyDom[0], {
        useCORS: true,
        imageTimeout:0,
        allowTaint: true //you can add this property
    }).then(function (canvas) {})