jsf - 如何转换p :signature value to an image (or other serialised form)

Question

我将在我的网站中使用 PrimeFaces 的签名标签，但我不知道如何以图像的形式存储在我的数据库中，或者如果可能的话，以任何其他类型存储。

我只想稍后在数据表中显示它，以便管理员可以管理和验证这些签名的真实性。

Answer 1

只需检查 PrimeFaces showcase for p:signature .签名值绑定(bind)到一个字符串，因此您可以简单地将签名作为字符串存储在数据库中。稍后您可以使用存储的字符串结合设置为 true 的 readonly 属性简单地显示签名。这正是展示柜中展示的内容。

您的签名字符串值将类似于:

{"lines":[[[81,75],[81,78],[81,80],[81,84],[83,87],...]]}

如果你真的想将它存储为图像而不是字符串，你有几个选择。

SVG

由于字符串基本上是一个带有“行”数组的 JSON 对象，每行都有坐标，您可以简单地将其转换为 SVG。您需要做的就是创建一些路径。一个粗略的实现:

public String toSvg(String signature, int width, int height) {
  List<String> paths = new ArrayList<>();
  try (JsonReader jsonReader = Json.createReader(new StringReader(signature))) {
    JsonObject jsonObject = jsonReader.readObject();
    JsonArray jsonArray = jsonObject.getJsonArray("lines");
    jsonArray.forEach(line -> paths.add(toSvgPath((JsonArray) line)));
  }
  StringBuilder sb = new StringBuilder();
  sb.append(String.format("<svg width=\"%d\" height=\"%d\" xmlns=\"http://www.w3.org/2000/svg\">\n", width, height));
  paths.forEach(sb::append);
  sb.append("</svg>");
  return sb.toString();
}


private String toSvgPath(JsonArray line) {
  StringBuilder sb = new StringBuilder("<path d=\"");
  for (int i = 0; i < line.size(); i++) {
    JsonArray coords = (JsonArray) line.getJsonArray(i);
    sb.append(String.format("%s%d %d ", (i == 0 ? "M" : "L"), coords.getInt(0), coords.getInt(1)));
  }
  sb.append("\" stroke=\"black\" fill=\"transparent\"/>\n");
  return sb.toString();
}

但是，由于可以从 JSON 对象轻松创建 SVG，您可能只想存储 JSON 对象并在需要呈现签名时创建 SVG。

另见:

• How to convert String to JsonObject
• Please explain SVG Path Commands and Coordinates

PNG

p:signature 有一个 base64Value 属性，它将 PNG 图像作为 base64 编码数据写入提供的属性:

<p:signature id="signature"
             base64Value="#{myBean.signature}">

这将为您提供一个如下所示的 URL:

data:image/png;base64,iVBORw0KGgoAAAANSU...

在您的 bean 中，这只是从 URL 获取数据的问题:

private static final String URL_DATA_PNG_BASE64_PREFIX = "data:image/png;base64,";

..

String encoded = signatureUrl.substring(URL_DATA_PNG_BASE64_PREFIX.length());
byte[] decoded = Base64.getDecoder().decode(encoded);

您可以选择将其另存为文件:

Path path = Paths.get("path/to/your/image.png");
Files.write(path, decoded);

另见:

• Decode Base64 data in Java
• https://primefaces.github.io/primefaces/8_0/#/components/signature?id=convert-to-binary