2

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

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

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

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

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

如果需要澄清或更多信息，请告诉我。

4

1 回答 1

2

听起来您在问如何使用 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/

于 2013-08-17T19:13:38.283 回答