我已经使用fabric js创建了一个 Canvas ,用户可以在其中创建名片。现在,我正在努力创建可缩放/可打印的图像(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:

javascript - 如何使用Fabric JS的toSVG数据在服务器端(PHP)上创建SVG和PNG图像-LMLPHP

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);

否成功:字体未加载,不可缩放(表示可打印的质量)

因此,我的问题是创建SVG和PNG(渲染BG图片,上传的图片,差异)的最佳方法是什么。字体等具有可打印质量。

注意:我更专注于SVG,因为客户更喜欢SVG,如果我可以在PNG中获得可打印的质量,它也可能会起作用。我也使用imagick实现了SVG到PNG的对话。但是无法获得可打印的质量(在较高的DPI问题(如以上的SS)上会发生)。

最佳答案

呈现内容的最可靠的方法,恕我直言,是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。

关于javascript - 如何使用Fabric JS的toSVG数据在服务器端(PHP)上创建SVG和PNG图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47476134/

10-12 14:49
查看更多