JSON signature to PDF using FPDF - php

Question

The title of this question is 100% what I'm after.
I have a JSON signature which is stored like this:
{"lines":[[[228.95,21.4],[228.95,24.4],[227.95,32.4],[225.95,40.4],[223.95,47.4],[221.95,54.4],[219.95,61.4],[216.95,69.4],[214.95,74.4],[212.95,80.4],[210.95,88.4],[208.95,93.4],[207.95,99.4],[206.95,106.4],[205.95,113.4],[205.95,119.4],[204.95,125.4],[204.95,129.4],[203.95,132.4],[202.95,134.4],[202.95,136.4],[202.95,137.4],[202.95,138.4],[201.95,139.4],[200.95,140.4],[200.95,141.4],[200.95,142.4],[200.95,143.4]],[[207.95,27.4],[231.95,24.4],[244.95,22.4],[257.95,22.4],[270.95,24.4],[282.95,26.4],[293.95,30.4],[303.95,35.4],[309.95,39.4],[314.95,44.4],[315.95,47.4],[315.95,51.4],[315.95,56.4],[312.95,62.4],[308.95,68.4],[301.95,75.4],[293.95,81.4],[284.95,87.4],[277.95,92.4],[268.95,97.4],[261.95,101.4],[255.95,103.4],[249.95,105.4],[244.95,105.4],[240.95,106.4],[235.95,107.4],[233.95,107.4],[231.95,107.4],[230.95,107.4],[229.95,107.4],[231.95,107.4],[234.95,107.4],[238.95,107.4],[245.95,107.4],[254.95,107.4],[268.95,109.4],[290.95,114.4],[317.95,120.4],[348.95,128.4],[378.95,135.4],[399.95,140.4],[413.95,142.4],[421.95,143.4],[427.95,144.4],[429.95,144.4],[430.95,144.4],[429.95,144.4],[427.95,144.4],[426.95,144.4],[423.95,144.4]]]}
I can show the signature on an page using jQuery like:
$('#sig').signature('draw', <?php echo $signature_1; ?>);
I can't figure it out though how I can decode the JSON string and display the signature using FPDF.
using
var_dump(json_decode();
I get
object(stdClass)#1 (1) { ["lines"]=> array(2) { [0]=> array(28) { [0]=> array(2) { [0]=> float(228.95) [1]=> float(21.4) } [1]=> array(2) { [0]=> float(228.95) [1]=> float(24.4) } [2]=> array(2) { [0]=> float(227.95) [1]=> float(32.4) } [3]=> array(2) { [0]=> float(225.95) [1]=> float(40.4) } [4]=> array(2) { [0]=> float(223.95) [1]=> float(47.4) } [5]=> array(2) { [0]=> float(221.95) [1]=> float(54.4) } [6]=> array(2) { [0]=> float(219.95) [1]=> float(61.4) } [7]=> array(2) { [0]=> float(216.95) [1]=> float(69.4) } [8]=> array(2) { [0]=> float(214.95) [1]=> float(74.4) } [9]=> array(2) { [0]=> float(212.95) [1]=> float(80.4) } [10]=> array(2) { [0]=> float(210.95) [1]=> float(88.4) } [11]=> array(2) { [0]=> float(208.95) [1]=> float(93.4) } [12]=> array(2) { [0]=> float(207.95) [1]=> float(99.4) } [13]=> array(2) { [0]=> float(206.95) [1]=> float(106.4) } [14]=> array(2) { [0]=> float(205.95) [1]=> float(113.4) } [15]=> array(2) { [0]=> float(205.95) [1]=> float(119.4) } [16]=> array(2) { [0]=> float(204.95) [1]=> float(125.4) } [17]=> array(2) { [0]=> float(204.95) [1]=> float(129.4) } [18]=> array(2) { [0]=> float(203.95) [1]=> float(132.4) } [19]=> array(2) { [0]=> float(202.95) [1]=> float(134.4) } [20]=> array(2) { [0]=> float(202.95) [1]=> float(136.4) } [21]=> array(2) { [0]=> float(202.95) [1]=> float(137.4) } [22]=> array(2) { [0]=> float(202.95) [1]=> float(138.4) } [23]=> array(2) { [0]=> float(201.95) [1]=> float(139.4) } [24]=> array(2) { [0]=> float(200.95) [1]=> float(140.4) } [25]=> array(2) { [0]=> float(200.95) [1]=> float(141.4) } [26]=> array(2) { [0]=> float(200.95) [1]=> float(142.4) } [27]=> array(2) { [0]=> float(200.95) [1]=> float(143.4) } } [1]=> array(50) { [0]=> array(2) { [0]=> float(207.95) [1]=> float(27.4) } [1]=> array(2) { [0]=> float(231.95) [1]=> float(24.4) } [2]=> array(2) { [0]=> float(244.95) [1]=> float(22.4) } [3]=> array(2) { [0]=> float(257.95) [1]=> float(22.4) } [4]=> array(2) { [0]=> float(270.95) [1]=> float(24.4) } [5]=> array(2) { [0]=> float(282.95) [1]=> float(26.4) } [6]=> array(2) { [0]=> float(293.95) [1]=> float(30.4) } [7]=> array(2) { [0]=> float(303.95) [1]=> float(35.4) } [8]=> array(2) { [0]=> float(309.95) [1]=> float(39.4) } [9]=> array(2) { [0]=> float(314.95) [1]=> float(44.4) } [10]=> array(2) { [0]=> float(315.95) [1]=> float(47.4) } [11]=> array(2) { [0]=> float(315.95) [1]=> float(51.4) } [12]=> array(2) { [0]=> float(315.95) [1]=> float(56.4) } [13]=> array(2) { [0]=> float(312.95) [1]=> float(62.4) } [14]=> array(2) { [0]=> float(308.95) [1]=> float(68.4) } [15]=> array(2) { [0]=> float(301.95) [1]=> float(75.4) } [16]=> array(2) { [0]=> float(293.95) [1]=> float(81.4) } [17]=> array(2) { [0]=> float(284.95) [1]=> float(87.4) } [18]=> array(2) { [0]=> float(277.95) [1]=> float(92.4) } [19]=> array(2) { [0]=> float(268.95) [1]=> float(97.4) } [20]=> array(2) { [0]=> float(261.95) [1]=> float(101.4) } [21]=> array(2) { [0]=> float(255.95) [1]=> float(103.4) } [22]=> array(2) { [0]=> float(249.95) [1]=> float(105.4) } [23]=> array(2) { [0]=> float(244.95) [1]=> float(105.4) } [24]=> array(2) { [0]=> float(240.95) [1]=> float(106.4) } [25]=> array(2) { [0]=> float(235.95) [1]=> float(107.4) } [26]=> array(2) { [0]=> float(233.95) [1]=> float(107.4) } [27]=> array(2) { [0]=> float(231.95) [1]=> float(107.4) } [28]=> array(2) { [0]=> float(230.95) [1]=> float(107.4) } [29]=> array(2) { [0]=> float(229.95) [1]=> float(107.4) } [30]=> array(2) { [0]=> float(231.95) [1]=> float(107.4) } [31]=> array(2) { [0]=> float(234.95) [1]=> float(107.4) } [32]=> array(2) { [0]=> float(238.95) [1]=> float(107.4) } [33]=> array(2) { [0]=> float(245.95) [1]=> float(107.4) } [34]=> array(2) { [0]=> float(254.95) [1]=> float(107.4) } [35]=> array(2) { [0]=> float(268.95) [1]=> float(109.4) } [36]=> array(2) { [0]=> float(290.95) [1]=> float(114.4) } [37]=> array(2) { [0]=> float(317.95) [1]=> float(120.4) } [38]=> array(2) { [0]=> float(348.95) [1]=> float(128.4) } [39]=> array(2) { [0]=> float(378.95) [1]=> float(135.4) } [40]=> array(2) { [0]=> float(399.95) [1]=> float(140.4) } [41]=> array(2) { [0]=> float(413.95) [1]=> float(142.4) } [42]=> array(2) { [0]=> float(421.95) [1]=> float(143.4) } [43]=> array(2) { [0]=> float(427.95) [1]=> float(144.4) } [44]=> array(2) { [0]=> float(429.95) [1]=> float(144.4) } [45]=> array(2) { [0]=> float(430.95) [1]=> float(144.4) } [46]=> array(2) { [0]=> float(429.95) [1]=> float(144.4) } [47]=> array(2) { [0]=> float(427.95) [1]=> float(144.4) } [48]=> array(2) { [0]=> float(426.95) [1]=> float(144.4) } [49]=> array(2) { [0]=> float(423.95) [1]=> float(144.4) } } } }
Looking for help.
Thanks.
BB

Answer 1

In my opinion you should obtain an image of your signature an include it into the pdf.
You have two paths for doing this, client side and server side.
For server side there is this script for other js project, now discontinued but maybe usefull for you https://github.com/thomasjbradley/signature-to-image/ I don't now if your plugin generates de signature JSON in the same fashion that this one, but reading this code can help you doing the server work
Other server side solution is to send the signature in svg format from your plugin and convert it to pdf, this php project supports svg natively https://tcpdf.org/
In the client side, you can get the canvas image through
HTMLCanvasElement.toDataURL()
This generates an uri containing the base64 encoded image string that you can send to the server, but depends on the browser support of the feature
Info here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Good luck