Node JS Sharp - 在将SVG转换为JPG时保持字体不变

Question

我正在使用sharp库创建动态JPEG车牌图片。

基本上，我有一个没有数字的个性化车牌PNG图像。然后我在代码中创建了一个svg，如下所示：

    const svg = new Buffer(
        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${x} ${y} 500 40">
            <defs>
            <style type="text/css">
                <![CDATA[
                    @font-face {
                        font-family: LicensePlate;
                        src: url('LicensePlate.ttf');
                    }
                    svg {
                        width: 100%;
                        height: 100%;
                    }
                ]]>
            </style>
            </defs>

            <text x="0" y="0" font-family="LicensePlate" font-size="${fontsize}" letter-spacing="${letterspace}">
                ${platenumber.toUpperCase()}
            </text>
        </svg>`
    );

传入所需的宽度、高度和车牌号码。然后我使用sharp库将我的SVG覆盖在车牌的中间。这一切都很好地实现了。

然而，我导入了一个自定义车牌字体（LicensePlate.ttf）。为了调试我的代码中的SVG图像，我制作了一个实际的svg图像文件，在浏览器中打开以确保它看起来正确，而它确实如此。

问题是，当最终创建JPEG文件时，它不包含我的自定义字体。相反，它退回到Verdana字体。

我的问题是，有没有办法在使用sharp创建图像时保持SVG字体？

谢谢！

完整代码

function createImage(platenumber) {
    //Trying to create some sort of responsiveness
    let fontsize = 80;
    let letterspace = 10;
    let width = 300;
    let height = 90;
    let x = 0;
    let y = -45;

    const inputlength = platenumber.length;

    //Minumum Length
    if (inputlength == 2) {
        x = -200;
    }
    if (inputlength == 3) {
        x = -150;
    }
    if (inputlength == 4) {
        x = -130;
    }
    if (inputlength == 5) {
        x = -105;
    }
    if (inputlength == 6) {
        x = -65;
    }


    try {
        console.log('stream is duplex, ', pipe instanceof stream.Duplex);
        //Read the svg code into a buffer with a passed in plate number
        const svg = new Buffer(
            `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${x} ${y} 500 40">
                <defs>
                <style type="text/css">
                    <![CDATA[
                        @font-face {
                            font-family: LicensePlate;
                            src: url('LicensePlate.ttf');
                        }
                        svg {
                            width: 100%;
                            height: 100%;
                        }
                    ]]>
                </style>
                </defs>

                <text x="0" y="0" font-family="LicensePlate" font-size="${fontsize}" letter-spacing="${letterspace}">
                    ${platenumber.toUpperCase()}
                </text>
            </svg>`
        );

        const plateid = rand.generate(10);

        //Create a write stream to a randomly generated file name
        const write = new fs.createWriteStream(`plates/${plateid}.jpg`);

        //Create the sharp pipeline
        const pipeline = pipe
            .overlayWith(svg, { gravity: sharp.gravity.center })//we center the svg image over the top of whatever image gets passed into the pipeline
            .jpeg();//we convert to JPG because it is a compressed file format and will save space (we could also do webp if we really want to be slick about it)

        //Create the read stream from the license plate template
        const read = new fs.createReadStream('plate-2.png')
            .pipe(pipeline)//pipe out sharp pipeline
            .pipe(write);//add the write stream so that our sharp pipeline knows where to put the image

        return plateid;
    } catch (e) {
        console.log(e);
        return null;
    }
}

SVG Image

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="90" viewBox="0 -50 500 40">
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: LicensePlate;
          src: url('LicensePlate.ttf');
        }
      ]]>
    </style>
  </defs>

  <text x="0" y="0" font-family="LicensePlate" font-size="150" letter-spacing="10">
    Pl@T3#
  </text>
</svg>

精确字体

这里是我使用的精确字体链接 http://www.fontspace.com/dave-hansen/license-plate

- DevShadow

---

你有没有解决这个问题的运气？ - gregb

很抱歉，@gregb，没有。 - DevShadow

提供的答案不起作用？我的意思是可能有点晚了。 - Can Rau

Answer 1

我通过在我的操作系统中安装字体来解决了这个问题。当文件被转换时，只有访问操作系统字体的库才能生效。最初的回答。

- fabioxd20

---

哦耶！那真是太有帮助了！顺便说一下，在 macOS 字体集合中，我必须提供完整的字体名称，而在浏览器（Chrome）中，我只需要写出字体的第一个单词即可。 - Can Rau

Answer 2

在操作系统上安装字体，如果您使用的是Windows，请不要忘记以“所有用户”方式安装字体，以便IIS和NodeJS有权限访问这些字体。

- VnDevil