将SVG转换为PNG时包括字体

Question

我正尝试生成一些SVG，并允许我的网站用户将这些SVG下载为PNG文件。
在阅读此文后，我可以下载带有外部图像的PNG文件。
现在，我正在尝试使PNG文件中的字体正确。 这篇文章似乎对此有答案，所以我添加了：

<defs>
    <style type="text/css">
        @font-face {
            font-family: Parisienne;
            src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
    </style>
</defs>

其中.....是base64编码的woff2字体。然后可以像这样在文本中使用：

<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>

字体在浏览器中正确显示（我没有在我的操作系统上安装它），但它仍然没有包含在PNG中。
我需要在第一个链接使用的脚本中添加一些额外的处理吗？
谢谢。

--编辑--
有人要求提供完整示例，这里是：

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: Parisienne;
        src: url('data:application/font-woff;charset=utf-8;base64,.....')
      }
    </style>
  </defs>

  <rect width="300" height="500" fill="#222"/>
  <text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>

由于base64编码后字体文件太大，我没有添加。但是您可以对任何喜欢的字体进行编码并替换...。我使用的是巴黎女郎字体。
这是一个带有实际字体的工作jsfiddle: https://jsfiddle.net/z8539err/ 在我的浏览器中，输出如下:

而如果使用上面提供的下载脚本，则会得到:

- Daniel Gruszczyk

---

字体在SVG上正确显示 - 您的系统中是否也安装了此字体？如果是，请卸载它并检查它是否仍然有效。这可能排除一些原因。 - Jongware

我还没有在我的系统上安装它。 - Daniel Gruszczyk

我已经添加了一个例子。 - Daniel Gruszczyk

非常抱歉一直在问问题 - 您如何准确构建HTML文件？似乎有不同的方法 - 我用某些方法得到了完全空白的PNG，没有任何文本。这使得您的问题无法在本地重现... - Jongware

不确定你所说的“如何构建我的HTML”是什么意思。像其他人一样吗？但是这里有一个方便的jsfiddle链接：https://jsfiddle.net/z8539err/ - Daniel Gruszczyk

Answer 1

我可以使用以下代码将字体包含在png本身中，请尝试一下。

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );


img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );


//open image 
window.location.href=canvas.toDataURL( "image/png" );
};

https://jsfiddle.net/user3839189/hutvL4ks/1/

- srmeile

---

这是我的下载脚本：https://jsfiddle.net/hutvL4ks/2/。在 jsfiddle 中似乎运行得还可以。这个给我提了一个提示——两者之间唯一的区别就是在我的网站上，base64 编码的字体具有新行字符（保存在带有新行的单独文件中）。我删除了新行，一切都运行得很好。 - Daniel Gruszczyk

Answer 2

在GitHub上有一个工作的概念验证项目，旨在解决OP的问题陈述。

https://github.com/nirus/SVG-PNG-Convert

构建了通用的JavaScript模块，可在任何地方进行修改和使用。阅读文档并尝试使用！

- NiRUS