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

Question

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

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

Answer 1

p的值：当您决定发送到数据库时，签名作为字符串值存储在数据库中，例如{“行”：[[[308.4113.86]，[284.4117.86]，[233.4125.86]，[168.4135.86]，[116.4143.86]，[89.4145.86]，[90.4145.86]，[106.4141.86]，[144.4135.86]，[180.4131.86]，[184.4131.86]，[184.4131.86]，[177.4131.86]}

Answer 2

我能够将签名转换为字节数组，并使用以下代码将其加密存储在我的内容存储库（filenet）中：

/**
     * A point along a line within a signature.
     */
    private static class Point {

        private int x;
        private int y;

        public Point(float x, float y) {
            this.x = Math.round(x);
            this.y = Math.round(y);
        }
    }

    public static void generateSignature(String jsonEncoding, OutputStream output) throws IOException {
        output.write(redrawSignature(extractSignature(jsonEncoding)));
        output.close();
    }

    /**
     * Extract the signature lines and points from the JSON encoding.
     * 
     * @param jsonEncoding
     *            the JSON representation of the signature
     * @return the retrieved lines and points
     */
    private static List<List<Point>> extractSignature(String jsonEncoding) {
        List<List<Point>> lines = new ArrayList<List<Point>>();
        Matcher lineMatcher = Pattern.compile("(\\[(?:,?\\[-?[\\d\\.]+,-?[\\d\\.]+\\])+\\])").matcher(jsonEncoding);
        while (lineMatcher.find()) {
            Matcher pointMatcher = Pattern.compile("\\[(-?[\\d\\.]+),(-?[\\d\\.]+)\\]").matcher(lineMatcher.group(1));
            List<Point> line = new ArrayList<Point>();
            lines.add(line);
            while (pointMatcher.find()) {
                line.add(new Point(Float.parseFloat(pointMatcher.group(1)), Float.parseFloat(pointMatcher.group(2))));
            }
        }
        return lines;
    }

    /**
     * Redraw the signature from its lines definition.
     * 
     * @param lines
     *            the individual lines in the signature
     * @return the corresponding signature image
     * @throws IOException
     *             if a problem generating the signature
     */
    private static byte[] redrawSignature(List<List<Point>> lines) throws IOException {
        BufferedImage signature = new BufferedImage(SIGNATURE_WIDTH, SIGNATURE_HEIGHT, BufferedImage.TYPE_BYTE_GRAY);
        Graphics2D g = (Graphics2D) signature.getGraphics();
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, signature.getWidth(), signature.getHeight());
        g.setColor(Color.BLACK);
        g.setStroke(new BasicStroke(2, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        Point lastPoint = null;
        for (List<Point> line : lines) {
            for (Point point : line) {
                if (lastPoint != null) {
                    g.drawLine(lastPoint.x, lastPoint.y, point.x, point.y);
                }
                lastPoint = point;
            }
            lastPoint = null;
        }
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        ImageIO.write(signature, IMAGE_FORMAT, output);
        return output.toByteArray();
    }

Answer 3

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

您的签名字符串值如下所示：

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

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

由于字符串基本上是一个带有“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图像作为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-到二进制