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样式,你必须在标签内部给出样式内容.然后你将得到完整的彩色图像.

希望这会帮助你.