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

Question

我在我的应用程序中使用了 svg 图标并使用 svg 绘制图表too.When我使用 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

JavaScript 通过引用传递对象（请参阅 Does Javascript pass by reference? or Is JavaScript a pass-by-reference or pass-by-value language? 了解解释）这意味着 SVG 在 html2canvas 到达之前由 svgElem.each 循环内的 parentNode.removeChild(node); 编辑掉处理它们。

但是，更改它可能无济于事 - 根据我的经验，html2canvas 不会呈现 SVG。这可以手动完成 - 这是一个带有源代码的答案，可以帮助您手动实现：Styling errors when converting inline SVG to png

Answer 2

我忘了回答这个 question.Someone 我的问题所以想到了。

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

希望对您有所帮助。

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

html2canvas generated image not picking svg in chart

javascript

jquery

html

svg

html2canvas