Question

是否可以使用PHP或JS将JSON转换为数据URI？

当我使用Thomas J Bradley的签名板（http://thomasjbradley.ca/lab/signature-pad/）通过HTML5 Canvas收集电子/数字签名时，我得到以下JSON输出：

[{ “LX”：27， “LY”：4， “MX”：27， “我的”：3}，{ “LX”：27， “LY”：5， “MX”：27，”我的 “：4}，{” LX “：25，” LY “：33，” MX “：27，” 我的 “：5}，{” LX “：25，” LY “：32，” MX“：25 ， “我的”：33}，{ “LX”：28， “LY”：7， “MX”：28， “我的”：6}，{ “LX”：30 “LY”：5， “MX” ：28， “我的”：7}，{ “LX”：31， “LY”：5， “MX”：30， “我的”：5}，{ “LX”：32， “LY”：5“， MX “：31，” 我的 “：5}，{” LX “：38，” LY “：5，” MX “：32，” 我的 “：5}，{” LX “：41，” LY“：5 ， “MX”：38， “我的”：5}，{ “LX”：42， “LY”：5， “MX”：41， “我的”：5}，{ “LX”：43， “LY” ：5， “MX”：42， “我的”：5}，{ “LX”：42， “LY”：6， “MX”：43， “我的”：5}，{ “LX”：40，” LY “：7，” MX “：42，” 我的 “：6}，{” LX “：37，” LY “：8，” MX “：40，” 我的 “：7}，{” LX“：29 “LY”：13， “MX”：37， “我的”：8}，{ “LX”：25， “LY”：16， “MX”：29， “我的”：13}，{ “LX” ：26， “LY”：16， “MX”：25， “我的”：16}，{ “LX”：30 “LY”：16， “MX”：26， “我的”：16}，{” LX “：31，” LY “：16，” MX “：30，” 我的 “：16}，{” LX “：32，” LY “：16，” MX “：31，” 我的“：16}， { “LX”：33， “LY”：16， “MX”：32， “我的”：16}，{ “LX”：34， “LY”：16， “MX”：33， “我的”：16 }，{ “LX”：36， “LY”：16， “MX”：34， “我的”：16}，{ “LX”：32， “LY”：18， “MX”：36， “我” 的：16}，{ “LX”：30 “LY”：18， “MX”：32， “我的”：18}，{ “LX”：28， “LY”：20， “MX”：30，”我的 “：18}，{” LX “：27，” LY “：20，” MX “：28，” 我的 “：20}，{” LX “：27，” LY “：22，” MX“：27 ， “我的”：20}，{ “LX”：29， “LY”：22， “MX”：27， “我的”：22}，{“LX “：30”，LY “：22，” MX “：29，” 我的 “：22}，{” LX “：32，” LY “：22，” MX “：30，” 我的“：22}，{ “LX”：35， “LY”：22， “MX”：32， “我的”：22}，{ “LX”：61 “LY”：9， “MX”：61， “我的”：8} ，{ “LX”：60， “LY”：8， “MX”：61， “我的”：9}，{ “LX”：59， “LY”：8， “MX”：60， “我的”： 8}，{ “LX”：58， “LY”：8， “MX”：59， “我的”：8}，{ “LX”：54， “LY”：11， “MX”：58，“我的“：8}，{” LX “：52，” LY “：12，” MX “：54，” 我的 “：11}，{” LX “：51，” LY “：14，” MX“：52， “我的”：12}，{ “LX”：51， “LY”：15， “MX”：51， “我的”：14}，{ “LX”：50， “LY”：18， “MX”： 51， “我的”：15}，{ “LX”：49， “LY”：24， “MX”：50， “我的”：18}，{ “LX”：49， “LY”：25，“MX “：49，” 我的 “：24}，{” LX “：50，” LY “：26，” MX “：49，” 我的 “：25}，{” LX “：52，” LY“：27， “MX”：50， “我的”：26}，{ “LX”：55， “LY”：28， “MX”：52， “我的”：27}，{ “LX”：56， “LY”： 28， “MX”：55， “我”：28}，{ “LX”：57， “立法院”：29， “MX”：56， “我”：28}，{ “LX”：59，“LY “：29，” MX “：57，” 我的“：29}]

JSON输出可用于在HTML5 Canvas上重绘/重新生成电子/数字签名。

我想要完成的是将JSON输出转换为数据URI。

如果需要澄清或提供更多信息，请告知我们。

Answer 1

听起来好像你在问如何使用JSON绘制图像，然后为它获取数据uri。

您可以使用以下

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var jsonObj = [{x:1, y:2}, {x:3,x:4}];

  // draw using your data, you implement this
  context.beginPath();
  context.moveTo(jsonObj[0].x, jsonObj[0].y);
  context.moveTo(jsonObj[1].x, jsonObj[1].y);
  context.closePath();
  context.lineWidth = 5;
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.strokeStyle = '#0000ff';
  context.stroke();

  // save canvas image as data url (png format by default)
  var dataURL = canvas.toDataURL();
  alert(dataURL);
</script>

http://jsfiddle.net/D9e2u/

是否可以使用PHP或JS将JSON转换为数据URI？

1 个答案: