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

Question

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

当我使用 Thomas J Bradley (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,"my":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,"my":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,"my":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。

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

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/