在页面加载时从PHP显示json画布图像


display json canvas image from php on page load

当页面加载时,我试图在画布中重新创建签名。我已经设法捕获签名,并将其存储在MySQL数据库中使用PHP。它被存储为json数据。现在的问题是:我有一个页面与画布元素,我可以检索json数据从数据库页面加载使用php之前,但我不知道如何将此数据传递到画布元素。希望有个解决办法,因为我花了太多时间搞砸了。谢谢你!

json数据:

"[
   {
      '"lx'":87,
      '"ly'":6,
      '"mx'":87,
      '"my'":5
   },
   {
      '"lx'":88,
      '"ly'":5,
      '"mx'":87,
      '"my'":6
   },
   {
      '"lx'":89,
      '"ly'":6,
      '"mx'":88,
      '"my'":5
   },
   {
      '"lx'":89,
      '"ly'":7,
      '"mx'":89,
      '"my'":6
   },
   {
      '"lx'":90,
      '"ly'":7,
      '"mx'":89,
      '"my'":7
   },
   {
      '"lx'":90,
      '"ly'":8,
      '"mx'":90,
      '"my'":7
   },
   {
      '"lx'":90,
      '"ly'":10,
      '"mx'":90,
      '"my'":8
   },
   {
      '"lx'":91,
      '"ly'":11,
      '"mx'":90,
      '"my'":10
   },
   {
      '"lx'":92,
      '"ly'":11,
      '"mx'":91,
      '"my'":11
   },
   {
      '"lx'":92,
      '"ly'":12,
      '"mx'":92,
      '"my'":11
   },
   {
      '"lx'":93,
      '"ly'":12,
      '"mx'":92,
      '"my'":12
   },
   {
      '"lx'":93,
      '"ly'":13,
      '"mx'":93,
      '"my'":12
   },
   {
      '"lx'":95,
      '"ly'":15,
      '"mx'":93,
      '"my'":13
   },
   {
      '"lx'":96,
      '"ly'":16,
      '"mx'":95,
      '"my'":15
   },
   {
      '"lx'":97,
      '"ly'":16,
      '"mx'":96,
      '"my'":16
   },
   {
      '"lx'":97,
      '"ly'":17,
      '"mx'":97,
      '"my'":16
   },
   {
      '"lx'":98,
      '"ly'":18,
      '"mx'":97,
      '"my'":17
   },
   {
      '"lx'":99,
      '"ly'":18,
      '"mx'":98,
      '"my'":18
   },
   {
      '"lx'":99,
      '"ly'":19,
      '"mx'":99,
      '"my'":18
   },
   {
      '"lx'":99,
      '"ly'":20,
      '"mx'":99,
      '"my'":19
   },
   {
      '"lx'":102,
      '"ly'":5,
      '"mx'":102,
      '"my'":4
   },
   {
      '"lx'":101,
      '"ly'":5,
      '"mx'":102,
      '"my'":5
   },
   {
      '"lx'":101,
      '"ly'":6,
      '"mx'":101,
      '"my'":5
   },
   {
      '"lx'":100,
      '"ly'":7,
      '"mx'":101,
      '"my'":6
   },
   {
      '"lx'":100,
      '"ly'":8,
      '"mx'":100,
      '"my'":7
   },
   {
      '"lx'":99,
      '"ly'":8,
      '"mx'":100,
      '"my'":8
   },
   {
      '"lx'":99,
      '"ly'":9,
      '"mx'":99,
      '"my'":8
   },
   {
      '"lx'":98,
      '"ly'":9,
      '"mx'":99,
      '"my'":9
   },
   {
      '"lx'":98,
      '"ly'":10,
      '"mx'":98,
      '"my'":9
   },
   {
      '"lx'":97,
      '"ly'":11,
      '"mx'":98,
      '"my'":10
   },
   {
      '"lx'":96,
      '"ly'":12,
      '"mx'":97,
      '"my'":11
   },
   {
      '"lx'":95,
      '"ly'":12,
      '"mx'":96,
      '"my'":12
   },
   {
      '"lx'":94,
      '"ly'":12,
      '"mx'":95,
      '"my'":12
   },
   {
      '"lx'":93,
      '"ly'":12,
      '"mx'":94,
      '"my'":12
   },
   {
      '"lx'":91,
      '"ly'":13,
      '"mx'":93,
      '"my'":12
   },
   {
      '"lx'":89,
      '"ly'":14,
      '"mx'":91,
      '"my'":13
   },
   {
      '"lx'":89,
      '"ly'":15,
      '"mx'":89,
      '"my'":14
   },
   {
      '"lx'":88,
      '"ly'":15,
      '"mx'":89,
      '"my'":15
   },
   {
      '"lx'":87,
      '"ly'":16,
      '"mx'":88,
      '"my'":15
   },
   {
      '"lx'":86,
      '"ly'":17,
      '"mx'":87,
      '"my'":16
   },
   {
      '"lx'":86,
      '"ly'":18,
      '"mx'":86,
      '"my'":17
   },
   {
      '"lx'":85,
      '"ly'":18,
      '"mx'":86,
      '"my'":18
   },
   {
      '"lx'":85,
      '"ly'":19,
      '"mx'":85,
      '"my'":18
   },
   {
      '"lx'":85,
      '"ly'":20,
      '"mx'":85,
      '"my'":19
   },
   {
      '"lx'":84,
      '"ly'":20,
      '"mx'":85,
      '"my'":20
   }
]"

你有两个选择:

在生成页面时回显到一个javascript变量中:

echo "<script>var sig = ".$jsonsig.";</script>";

或者在用AJAX调用

加载页面后检索它

(jQuery在你的页面脚本,需要一个PHP脚本返回JSON代码)

$.getJSON("getmysig.php",function(data) {
// create canvas here
});