Convert Joget Signature Field to Image (Generic Dynamic Table, Field, and ID)

1. Why This Is Useful

Joget signature fields store stroke data (JSON), but many use cases need a real image output.

This script converts signature JSON into a PNG image and returns it as a Base64 data URL.

The best part is that it uses dynamic table, field, and id parameters, so you can reuse the same code anywhere without rewriting logic.

Use this when you need to:

preview a signature directly in a form or report,
embed signature image in email/PDF templates,
avoid custom external conversion services.

2. Where to Use in Joget

Form Builder: BeanShell script in a formatter/element that needs image output.
Userview/Report: render returned data URL as image source.
Workflow tools: generate signature image before notifications or documents.

3. Required Input Parameters

Pass these parameters to the script:

table: form table name
field: signature field column
id: record ID

Because these are dynamic inputs, the same script can work across multiple forms and modules.

Example usage pattern:

#beanshell.generateSignature[table=your_table&field=your_signature_field&id=your_record_id]#

4. Full Working Code

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.sql.DataSource;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import org.json.JSONArray;
import org.json.JSONObject;
import javax.imageio.ImageIO;
import java.net.URLDecoder;
import java.util.Base64;

import org.joget.apps.app.service.AppUtil;
import org.joget.commons.util.LogUtil;

// --------------------------------------------------
// Input parameters
// #beanshell.generateSignature[
//   table=app_fd_cpa_comp_question&
//   field=c_consumer_signature&
//   id=UUID
// ]#
// --------------------------------------------------


public String generateJSON(String table, String fieldName, String recordId){
    String callHashToInsertResponse = 
    "#form." + table + "."+ fieldName +"["+ recordId +"]?url#";

    // Evaluate hash
    String result = AppUtil.processHashVariable(callHashToInsertResponse, null, null, null);

    return result;
}



String tableName = table[0];
String fieldName = field[0];
String recordId  = id[0];

LogUtil.info(
    "generateSignature",
    "Params -> table=" + tableName + ", field=" + fieldName + ", id=" + recordId
);

LogUtil.info(
        "Image URL : ",
        generateJSON(tableName, fieldName, recordId)
    );


//Here defines the signature image size
int width = 200;
int height = 80;

try {
    String jsonstr = URLDecoder.decode(generateJSON(tableName, fieldName, recordId), "UTF-8");
    JSONArray jarr = new JSONArray(jsonstr);
    BufferedImage offscreenImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    Graphics2D g2 = offscreenImage.createGraphics();
    g2.setColor(Color.white);
    g2.fillRect(0,0,width,height);
    g2.setPaint(Color.black);
    g2.setStroke(new BasicStroke(2));
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    for (int i = 0; i < jarr.length(); i++) {
        JSONObject jobj = jarr.get(i);
        g2.drawLine(jobj.getInt("lx"), jobj.getInt("ly"), jobj.getInt("mx"), jobj.getInt("my"));
    }

    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.setUseCache(false);
    ImageIO.write( offscreenImage, "png", baos );
    baos.flush();
    byte[] imageInByte = baos.toByteArray();
    baos.close();   
    String base64bytes = Base64.getEncoder().encodeToString(imageInByte);
    String src = "data:image/png;base64," + base64bytes;

    return src;
} catch (Exception e) { }

5. Quick Validation Checklist

Signature exists in selected record.
Script returns value starting with data:image/png;base64,.
Image renders correctly in form/userview/report.
Empty/invalid signature JSON is handled safely in your UI.

6. Security and Publishing Note

Replace real table names, field IDs, and record IDs with placeholders in public posts.
Do not publish internal schema naming conventions if they reveal business context.

7. Final Note

This is a practical conversion pattern when your workflow needs image output from Joget signature strokes without adding external services.

Follow-up topic: Auto-attach generated signature images in Joget email notifications.