如何使用fabric js的toSVG数据在服务器端（PHP）创建SVG和PNG图像

Posted 2023-03-25

【中文标题】如何使用fabric js的toSVG数据在服务器端（PHP）创建SVG和PNG图像

【英文标题】：How to create SVG and PNG image on server side (PHP) using toSVG data of fabric js

【发布时间】：2018-05-08 15:18:11

【问题描述】：

我使用织物 js 创建了一个画布，用户可以在其中创建名片。现在我正在努力创建可扩展/可打印的图像（SVG 和 PNG）。

我正在尝试几种方法来使用结构 jS 的 toSVG 数据在服务器端创建 SVG 和 PNG 图像。因此，在该用户可以使用该 SVG 打印卡片之后。

我尝试了以下选项（以下所有链接都指的是我在 SO 中的问题，我已要求找到合适的方法）： 1) Generate SVG on php side using Canvas JSON没有成功 2) Using raw svg data generate png on server side部分成功：面临自动换行、字体问题等问题。也无法获得可打印的图像。 （如果使用更高的 DPI，则问题看起来像附加的 SS）检查下面的 SS：

3) Generate Printable PDF using SVG raw data部分：无法获取可打印的 PDF

4) generate svg using raw data of svg in imagick没有成功：无法创建 svg 图片（BG 问题，图片问题）。

5) 使用原始数据直接创建 SVG

$file_name = uniqid($prefix).".svg";
$file_handle = fopen("$folder_name/".$file_name, 'w');
fwrite($file_handle, $raw_svg);
fclose($file_handle);

NO Success：字体未加载，不可缩放（表示可打印质量）

所以我的问题是创建渲染 BG 图像、上传图像、差异的 SVG 和 PNG 的最佳方法是什么。具有可打印质量的字体等。

注意：我更关注 SVG，因为客户更喜欢这样，如果我可以在 PNG 中获得可打印的质量，它也可能会起作用。我也使用 imagick 来实现 SVG 到 PNG 的对话。但无法获得可打印的质量（发生上述 SS 等较高 DPI 问题）。

【问题讨论】：

我已尝试将我所有的研究以及我迄今为止所做的尝试都包含在内。因此，如果有任何替代方案，请告诉我。像 imagemagick 或任何方法的替代品。所以我可以实现我想要的输出。

我不确定 SVG 的功能，但您可以在服务器上使用 PhantomJS。它基本上是一个无头 WebKit 浏览器，可以像用户浏览器一样呈现内容。然后您可以将其渲染为图像 (PNG) 以及 PDF。您还可以执行自己的 JS 代码，这可能会带来更多可能性。也许这是一个选择？您仍然可以使用 shell_exec 等集成到 PHP 中。

实际的 toSVG 数据有什么问题？是一个实际的 SVG。将 SVG 转换为 PNG imagemagick 不好？

如何在服务器端打印带有原始 svg 数据的名片？它是一个字符串，所以需要一个 svg 图像而不是原始 svg。我最终在原始 svg 文件中添加了字体，然后使用有问题的第 5 种方法创建了图像。

【参考方案1】：

恕我直言，最可靠的渲染方式是 webkit 考虑使用 wkhtmltopdf 从输入的 Web 内容生成可打印质量的 PDF 文件，使用不同的字体。

您可以通过将二进制文件复制并粘贴到您的服务器来安装它。

它经过预编译，您可以下载流行发行版的二进制文件。

这个可以安装在浏览器上，看这个例子：

你可以像这样使用 passthru 从 php 调用 wkhtmltopdf：

echo("<pre>");
passthru("/full/path/to/your/wkhtmltopdf input_html_with_svg_inside.html output.pdf 1>&2");
echo("</pre>");

稍后，您可以使用 imagemagick 包中的convert 将其转换为透明 png。

另外，在服务器上安装字体，你不会总是得到正确的字体，但你可以在网上找到可以免费安装的字体包。 还有wkhtmltopng。

HTH。