javascript - html2canvas 生成的图像未在图表中选择 svg

Question

我在我的应用程序中使用了 svg 图标并且也使用 svg 绘制图表。当我使用 html2canvas 生成图像时，所有 svgs 都被忽略并且生成的图像没有所有 svgs。

我正在使用以下函数生成图像。

function svgToCanvas (targetElem) {
        var nodesToRecover = [];
        var nodesToRemove = [];

        var svgElem = targetElem.find('svg');

        svgElem.each(function(index, node) {
            var parentNode = node.parentNode;
            var svg = parentNode.innerHTML;

            var canvas = document.createElement('canvas');

            canvg(canvas, svg);

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });

        html2canvas(targetElem, {
            allowTaint: true,
            onrendered: function(canvas) {
                // var ctx = canvas.getContext('2d');
                // ctx.webkitImageSmoothingEnabled = false;
                // ctx.mozImageSmoothingEnabled = false;
                // ctx.imageSmoothingEnabled = false;

                var img_PNG = Canvas2Image.saveAsPNG(canvas);
            }
        });
    }

这个函数是这样调用的 svgToCanvas($("#app-container"));

提前致谢。

Answer 1

我忘了回答这个问题。有人投票赞成我的问题，所以想到了。

实际上 html2canvas 正在转换为图像，但它没有选择 SVG 的样式，因为它是在不同的 css 文件中编写的。所以如果你想获得 SVG 的样式在图像中，您必须在标签内提供内联样式。然后您将获得完整且彩色的图像。

希望对您有所帮助。