7

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

DS9
  • 2,995
  • 4
  • 52
  • 102
  • I have tried to include all of my research and what i have tried so far. So if there is any alternative please let me know. like alternative of imagemagick or any method. So i can achieve my desired output. – DS9 Nov 24 '17 at 15:22
  • 1
    I am not sure about SVG capabilities, but you could use PhantomJS on the server. It is basically a headless WebKit browser which can render stuff just like the browser of the user. And then you can render that to an image (PNG) as well as to a PDF. You can also execute your own JS Code, which might open even more possibilities. Maybe that's an option? You could still integrate into PHP using shell_exec and the like. – matths Nov 30 '17 at 17:38
  • 1
    what is the problem with the actual toSVG data? is an actual SVG. To converte SVG to PNGs imagemagick is not good? – AndreaBogazzi Dec 02 '17 at 10:49
  • How one can print business card with raw svg data on server side? Its a string, so need a svg image instead of raw svg. I have ended up adding fonts in raw svg file and then created the image using 5th method which is in question. – DS9 Dec 02 '17 at 12:11

1 Answers1

1

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.

Felipe Valdes
  • 1,998
  • 15
  • 26