如何将 p:signature 值转换为图像（或其他序列化形式）

Question

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

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

Answer 1

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

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

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

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

SVG

由于字符串基本上是一个带有“lines”数组的 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。

也可以看看：

• 如何将字符串转换为 JsonObject
• 请解释SVG路径命令和坐标

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);

也可以看看：

• 用 Java 解码 Base64 数据
• https://primefaces.github.io/primefaces/8_0/#/components/signature?id=convert-to-binary