Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create SVG and PNG image on server side (PHP) using toSVG data of fabric js

I have created one canvas using fabric js, where user can create there business card. Now i am struggling to create scalable/printable image (SVG & PNG).

I am trying several ways to create SVG and PNG image on server side using toSVG data of fabric jS. So after that user can use that SVG to print there card.

I have tried below options (below all links are refering to my questions in SO which i have asked to find a suitable way):
1) Generate SVG on php side using Canvas JSON
No Success
2) Using raw svg data generate png on server side
Partial Success : Facing issues like Word wrapping, Font Issue etc. Also not able to get printable image. (If using higher DPI then issue appear like attached SS) Check below SS:

enter image description here

3) Generate Printable PDF using SVG raw data
Partial: Not able to get the printable PDF

4) generate svg using raw data of svg in imagick
No Success: Not able to create svg image (BG issue, image issue).

5) Directly create SVG using raw data

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

NO Success: Font is not loading, Not scalable (means printable quality)

So my question is what is the best way to create SVG & PNG which render BG Image, Uploaded Images, diff. fonts etc. with printable quality.

Note: I am more focusing on SVG because client prefers that, if i can get printable quality within PNG it might also work. Also i have used imagick to achieve SVG to PNG conversation. But not able to get printable quality (on higher DPI issue like above SS occur).

like image 603
DS9 Avatar asked Nov 24 '17 15:11

DS9


1 Answers

The most reliable way to render stuff, IMHO, is webkit consider using wkhtmltopdf to generate printable quality PDF files from input web content, using different fonts.

You can install it by copying and pasting the binary into your server.

It comes precompiled and you download binaries for popular distros.

This can be installed on the browser, see this example:

You can call wkhtmltopdf from php using passthru like this:

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

Later, you can use convert from the imagemagick package to convert it to a transparent png for instance.

Also, install the fonts on the server, you won't always get all the fonts right, but you can find font packages online you can install for free. there is also wkhtmltopng.

HTH.

like image 166
Felipe Valdes Avatar answered Oct 18 '22 11:10

Felipe Valdes