Imagick在使用PHP将SVG转换为JPG时未使用自定义字体

Question

我在将SVG转换为JPG图像时遇到了自定义字体未呈现的问题。我使用font-family="Lobster"定义SVG文本元素。

我的服务器设置如下：

• CentOS 6.5（32位）
• ImageMagick 6.5.4-7
• PHP 5.2.17

以下是我正在测试但无法使用的PHP代码，我想使用自定义字体Lobster。

//Setup SVG to be read by Imagick.
$SVG = '<?xml version="1.0" encoding="utf-8"?>';
$SVG .= '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
$SVG .= '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="158px" height="92px" viewBox="0 0 158 92" enable-background="new 0 0 158 92" xml:space="preserve">';
$SVG .= '<text transform="matrix(1 0 0 1 32 58)" font-family="Lobster" font-style="normal" font-size="20px" font-weight="400">Lobster</text>';
$SVG .= '</svg>';

$image = new Imagick();

//Convert SVG to JPG
$image->readImageBlob($SVG);
$image->setImageFormat("jpeg");

//Save the thumbnail.
$save_path = '/home/username/lobster.jpg';
$image->writeImage($save_path);


echo '<img src="lobster.jpg" alt="" /><br />';

以下是生成的图片：

我尝试过什么：

我创建了一个名为type.xml的文件，位于/home/username/.magick/type.xml，其中包含如下所示的Lobster字体定义：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE typemap [
<!ELEMENT typemap (type)+>
<!ELEMENT type (#PCDATA)>
<!ELEMENT include (#PCDATA)>
<!ATTLIST type name CDATA #REQUIRED>
<!ATTLIST type fullname CDATA #IMPLIED>
<!ATTLIST type family CDATA #IMPLIED>
<!ATTLIST type foundry CDATA #IMPLIED>
<!ATTLIST type weight CDATA #IMPLIED>
<!ATTLIST type style CDATA #IMPLIED>
<!ATTLIST type stretch CDATA #IMPLIED>
<!ATTLIST type format CDATA #IMPLIED>
<!ATTLIST type metrics CDATA #IMPLIED>
<!ATTLIST type glyphs CDATA #REQUIRED>
<!ATTLIST type version CDATA #IMPLIED>
<!ATTLIST include file CDATA #REQUIRED>
]>
<typemap>

  <type
     format="ttf"
     name="Lobster"
     fullname="Lobster"
     family="Lobster"
     glyphs="/home/username/fonts/Lobster/Lobster.ttf"
     style="normal"
     stretch="normal"
     weight="400"
     />

</typemap>

我已经在 /usr/lib/ImageMagick-6.5.4/config/type.xml 文件中包含了一个直接的引用，如下所示：

<typemap>
   <include file="type-ghostscript.xml" />
   <include file="/home/username/.magick/type.xml" />
</typemap>

当使用 $image->queryfonts(); 方法输出字体时，我可以看到在列表中定义了 Lobster 字体。例如，以下内容：

$image = new Imagick();
$fonts = $image->queryfonts();
foreach($fonts as $font) {
    echo $font . '<br />';
}

返回此内容：

返回这个：

[...]
Hershey-Plain-Triplex-Regular
Hershey-Script-Complex-Regular
Hershey-Script-Simplex-Regular
Lobster
MeriendaOne
NewCenturySchlbk-Bold
NewCenturySchlbk-BoldItalic
NewCenturySchlbk-Italic
NewCenturySchlbk-Roman
[...etc]

此外，我相信ImageMagick正在使用自己的内部SVG渲染器。shell命令：

convert -list format | grep SVG

返回值：

MSVG  SVG       rw+   ImageMagick's own SVG internal renderer
SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.26.0)
SVGZ  SVG       rw+   Compressed Scalable Vector Graphics (RSVG 2.26.0)

有什么想法，为什么这不起作用？

- Axel

---

它可以从命令行工作（即将SVG保存为文件，然后调用convert test.svg test.png），我看不到任何错误。这可能是ImageMagick中的一个错误。 - Danack

Answer 1

我曾经遇到过将SVG转换为PNG的问题，使用Imagemagick无法解决。但是通过docraptor，我成功得到了需要的结果。

 DocRaptor.createAndDownloadDoc("YOUR_API_KEY", {
    test: true, // test documents are free, but watermarked
    type: "pdf",
    document_content: document.getElementById('container_of_svg').innerHTML
  }) 

请确保将字体声明添加到container_of_svg元素中，如下所示，并确保为您的字体添加绝对URL：

@font-face {
    font-family: 'DaimlerCS-Demi';
    src: url("https://staging.xxx.com/xx/fonts/xx/FontCS-Demi.eot")
}
page {
      size: 21.16cm 15.87cm;
      padding: 1cm;
      margin:0;
      background: #E6E6E6;
}

请在此查看他们的文件：https://docraptor.com/documentation/jquery

注意：docraptor并非免费，但如果您的客户可以支付，我认为它是一个可靠的选择。

- bananaCute

Answer 2

请重新启动您的Web服务器或PHP-FPM实例。

显然，ImageMagick缓存了可以在SVG中使用的字体信息，即使queryFonts()返回的列表没有被缓存。

在我重启php-fpm实例之前，您的代码示例对我无效，但是重启后就完美地工作了。

- Danack

---

这不起作用。我甚至让主机将 PHP 版本升级到 5.4，并安装了 Inkscape，但仍然无法解决。我相信这是我正在使用的 ImageMagick 当前版本的问题。我希望他们能够升级它。如果那样可以解决问题，我会再报告一下。 - Axel