HTML2canvas生成的图像未在图表中选取SVG

html2canvas generated image not picking svg in chart

本文关键字：选取 SVG 图像 HTML2canvas      更新时间：2023-09-26

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

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

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"));

提前谢谢。

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

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

希望这对您有所帮助。

JavaScript 通过引用传递对象（请参阅 Javascript 是否通过引用传递？或 JavaScript 是按引用传递还是按值传递语言？进行解释），这意味着在 html2canvas 开始处理它们之前，SVG 是由svgElem.each循环中的parentNode.removeChild(node);编辑出来的。

但是，更改它可能无济于事 - 根据我的经验，html2canvas 不会渲染 SVG。这可以手动完成 - 这里有一个带有源代码的答案，可以帮助您手动实现： 将内联 SVG 转换为 png 时的样式错误

相关文章：