Is it possible to convert JSON into a Data URI with PHP or JS?

Question

Is it possible to convert JSON into a Data URI with PHP or JS?

When I use Signature Pad by Thomas J Bradley (http://thomasjbradley.ca/lab/signature-pad/) to collect electronic / digital signatures through HTML5 Canvas, I get the following JSON output:

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

The JSON output could be used to redraw / regenerate an electronic / digital signature onto a HTML5 Canvas.

What I'm trying to accomplish is converting the JSON output into a Data URI.

If clarification or more information is needed, please let me know.

Answer 1

Sounds like you're asking how to draw an image using your JSON and then get a data uri for it.

You could use the following

<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/