如何将svg中的字体真棒图标导出为png？

Question

我正在尝试将mermaid导出为png。我已经取得了一定程度的成功，但是，我仍然无法在svg中导出真棒字体图标。可以通过fa类来简单地调用它们，而通常的画布导出在导出时并未考虑它们。在MWE下面，您可以看到PNG输出中缺少汽车图标。请帮助。

我的理解是，要使画布导出正常工作，所有内容都必须在svg中内联，但是我找不到找到该方法的方法，因为在美人鱼中，可以根据需要插入任何字体超棒的图标。

MWE

function drawInlineSVG(svgElement, ctx, callback)
{
    var svgURL = new XMLSerializer().serializeToString(svgElement);
    console.log(svgElement);
    // console.log(svgURL);
    var img = new Image();
    img.onload = function ()
    {
        ctx.drawImage(this,0,0);
        callback(this);
    }
    // img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
    img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgURL ) );
}

输出：

为简便起见，我仅在上面包括了从svg到png的导出功能。完整的代码可在Jsfiddle中找到：https://jsfiddle.net/parthi2929/r6wb9ka5/6/

• 注意汽车在输出上方缺失（png部分）。另请注意字体更改。我想完全像在svg中那样导出png。
• 在jsfiddle中也可以注意到，我尝试了几种其他方法，包括使用canvg，rasterizeHTML，但是前者甚至不渲染任何字体，而后者却导致缺少汽车的相同结果。

我无法在SO的摘要区域中进行复制，因为它引发了错误，因此请原谅。

Answer 1

我有完全相同的问题，Google将我带到了这里。我很惊讶您没有早些得到答复。我发现网站faToPng提供了一个转换器（可转换为.PNG，.JPG或base64），您可以使用该转换器。不幸的是，它不支持FA4。

在此过程中，我还遇到了this site，它是一个在线SVGtoPNG转换器，可以帮助处理我正在处理的其他文件。