使用FPDF进行PDF的JSON签名

时间:2016-07-09 06:25:39

标签: php jquery json fpdf

这个问题的标题是我追求的100%。

我有一个JSON签名,存储方式如下:

{"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]]]}

我可以使用jQuery在页面上显示签名:

$('#sig').signature('draw', <?php echo $signature_1; ?>); 

我无法弄清楚如何解码JSON字符串并使用FPDF显示签名。

使用

var_dump(json_decode();

我得到了

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

寻求帮助。

感谢。

BB

1 个答案:

答案 0 :(得分:0)

在我看来,您应该获得签名的图像,并将其包含在pdf中。

您有两条路径可以执行此操作,即客户端和服务器端。

对于服务器端,有这个脚本用于其他js项目,现在已经停止但可能对你很有用https://github.com/thomasjbradley/signature-to-image/如果你的插件以与这个相同的方式生成de signature JSON,我现在不会这样做,但是阅读此代码可以帮助您完成服务器工作

其他服务器端解决方案是从您的插件发送svg格式的签名并将其转换为pdf,这个php项目本机支持svg https://tcpdf.org/

在客户端,您可以通过

获取画布图像
HTMLCanvasElement.toDataURL()

这将生成一个包含base64编码图像字符串的uri,您可以将其发送到服务器,但取决于该功能的浏览器支持

信息在这里https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

祝你好运