有没有办法将JSON转换为SVG对象?

时间:2013-07-03 18:19:00

标签: javascript jquery json svg signature

我正在开发一个签名捕获小程序,其中一个要求是将签名存储为SVG以备将来使用。我目前正在使用Signature Pad来捕获签名,但它将其存储为JSON。无论如何使用JSON生成一个SVG对象,还是以错误的方式解决这个问题?

1 个答案:

答案 0 :(得分:9)

值得庆幸的是,Signature Pad以超级可读的方式对JSON数据进行编码。因为SVG只是一个文本文档,所以我们可以使用编码的JSON签名轻松地以编程方式生成SVG图像。

作为概念验证,请从Pad文档中获取this regenerated signature。我们只需要从每个对象生成SVG路径。查看source有关画布的工作方式(搜索drawSignature),您可以用您选择的任何语言制作一个简单示例。

Here's a jsfiddle for it in JavaScript.

function generate_svg(paths) {
  var svg = '';
  svg += '<svg width="198px" height="55px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';

  for(var i in paths) {
    var path = '';
    path += 'M' + paths[i].mx + ' ' + paths[i].my;   // moveTo
    path += ' L ' + paths[i].lx + ' ' + paths[i].ly; // lineTo
    path += ' Z';                                    // closePath
    svg += '<path d="' + path + '"stroke="blue" stroke-width="2"/>\n';
  }

  svg += '</svg>\n';
  return svg;
}